Here is my problem : Maps inside a hidden div are not shown
possible solution :
<div [hidden]="!showMap">
<sebm-google-map #myMap></sebm-google-map>
</div>
<button (click)="showMap = true; myMap.triggerResize()">resize</button>
This could work with a simple 1 variable, in my case I have dynamic creation of theses div, so i cannot point to #myMap so easily
This is for calling triggerResize() on all <sebm-google-map> elements:
<div *ngFor="let item of items"> <!-- just some ngFor for demo -->
<button #myMap (click)="showMap = true; doTriggerResize()">resize</button>
</div>
#ViewChildren('myMap') viewChildren:QueryList;
doTriggerResize() {
this.viewChildren.toArray().forEach((e) {
e.triggerResize();
});
}
Related
I have to change cursor icon whenever dragging an item to nondraggable and draggable zone.How can i achieve this in angular.
so first i have tried to set predefined cursor "grabbing" while dragging but still not able to set.
The default looks like in the screenshot (pointer with a small rectangle below), but I need to change that to a custom image or grabbing
Here is the code link
https://stackblitz.com/edit/hello-angular-6-wsyygt?file=src%2Fapp%2Fapp.component.html
CodeSnippet:
<div>
<div class="drag1" *ngFor="let vehicle of canBeCopy" draggable="true" (dragstart)="onDragStart(vehicle,$event)" >
<p>{{vehicle}}</p>
</div>
</div>
<hr>
<div>
<p>Drop Area</p>
<div class="availablevehicle" (dragover)="allowDrop($event)"(drop)="onDrop($event)">
<div *ngFor="let vehicle of vehicles" >
<p>{{vehicle}}</p>
</div>
</div>
<div>
.ts file
onDrop(ev) {
let index = this.vehicles.findIndex((v)=>v==this.vehicle);
if(index<0){
this.vehicles.push(this.vehicle);
}
ev.target.style.cursor = "pointer"
}
onDragStart(vehicle,event){
this.vehicle = vehicle;
event.target.style.cursor = "grabbing"
console.log("vent",event);
}
allowDrop(ev) {
ev.dataTransfer.dropEffect = "copy";
ev.target.style.cursor = "grabbing"
ev.preventDefault();
}
any code snippet solution appreciable
Thanks
This may not be exactly what you're looking for, but check out adding HostBinding/HostListener to a directive.
in a directive, you can create a HostBinding:
#HostBinding('style.cursor') private cursor = 'default';
Then you can target dragover events via a HostListener
#HostListener('dragover', ['$event']) onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.cursor = 'pointer' // any custom cursor would be assigned here
}
Here's a good reference https://alligator.io/angular/hostbinding-hostlistener/
Happy Coding!
I want to show a div that is hidden when I click on a Button. I am working with Angular7 I tried some methods but they didn't work. Please help me. Thanks
You can use *ngIf
Template:
<div *ngIf="display">Test Data</div>
<input type="button" value="click" (click)="update"/>
Component:
display = true;
update(){
this.display = !this.display;
}
You can link an *ngIf directive to your component with a variable set to True,
then on the button click modify the variable to false.
Template:
<div *ngIf='variable'></div>
<button (click)='showContent()'></button>
Component:
variable = true;
showContent() {
this.variable = false;
}
change display or visibility depending on what you need.
use ngStyle or ngClass to set it based on a condition
I placed ui-sref attribute in tr element.
<tr ui-sref="test" ng-repeat="d in data">
Everything runs well, but I would like the link to 'test' to be visible in the bottom of the browser when hover the row of the table. Is there a way to obtain it?
angular.module('myApp',[])
.controller('MyCtrl', function(){
this.model = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as myCtrl">
<span ng-mouseover="myCtrl.model.mouseIsOver = true"
ng-mouseout="myCtrl.model.mouseIsOver = false">
Hover me
</span>
<div ng-if="myCtrl.model.mouseIsOver">
test
</div>
</div>
Not really related to ui-router but you can do this with built in directives in the ng main module.
I am developing an website with AngularJS and
mobile angular UI.
I have a menu bar which will show on clicking a button and should be closed when I click the options in it. But it isn't working as expected.
My files:
index.html
<div id="menuBar" ng-show="showMenu">
<div class="row">
page1
</div>
</div>
js for hiding menu
app.controller('mainController', function ($rootScope, $scope) {
$rootScope.showMenu = false;
$rootScope.$on("$routeChangeStart", function () {
$rootScope.showMenu = false;
});
});
So while switching to some other file the menu should hide ideally. But it didn't happen so.
The problem is how you show your menu. With this code:
<div ng-click="showMenu=!showMenu" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
you change showMenu property of the child scope. This showMenu is not the same as $rootScope.showMenu. For this reason when you change $rootScope.showMenu in $routeChangeStart it doesn't effect child scope property. Instead you should do something like this:
<div ng-click="toggleMenuBar()" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
and in controller:
$scope.toggleMenuBar = function() {
$rootScope.showMenu = !$rootScope.showMenu;
};
I'm trying to use accordion and html content in this way:
<accordion>
<accordion-group ng-repeat="item in items">
<accordion-heading>
<a class="btn btn-primary btn-block btn-elenco">
<img postsrc="img/flag/flag_{{item.index}}.jpg">
</a>
</accordion-heading>
<p ng-bind-html="item.content"></p>
</accordion-group>
</accordion>
AND
var items = [];
for(var i=0;i<10;i++){
var content = "<div>TEST</div>";
items.push({index:i,content:content});
}
$scope.items = items;
var app = angular.module('MyApp',['ngSanitize','ui.bootstrap']);
Accordion works but html isn't rendered into p tag.
What could be the problem?
EDIT
If i try something like:
<div ng-bind-html="to_trusted(item.content)"></div>
And add function to controller:
$scope.to_trusted = function(html_code)
{
console.log(html_code);
return $sce.trustAsHtml(html_code);
}
Nothing changes and in console i get many "undefined"!
This is because the HTML content is declared unsafe by Angular due to it's Strict Contextual Escaping.
Another SO answer already explains clearly how this can be solved: HTML injection, that is if you are using Angular version 1.2.0 or up.
I created a Plunkr to match your case.