I created an overlay in a project based on the example :
https://material.angular.io/cdk/overlay/
In my component Html :
<div class="row justify-content-center">
<div class="col-8">
Some Infos here
<button type="button" (click)="isOpen = !isOpen" cdkOverlayOrigin #originOverlay="cdkOverlayOrigin" class="btn btn-success"><fa-icon icon="check"></fa-icon><span>Buy</span></button>
</div>
</div>
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="originOverlay" [cdkConnectedOverlayOpen]="isOpen">
<div>This is my tooltip</div>
</ng-template>
Then i added the line isOpen = false; in my component.ts and the import in my global app.module : OverlayModule
On the button code line, I have this error showing up :
No directive found with exportAs 'cdkOverlayOrigin'
I have replicated your same code in stackblitz and it seems to work fine for me. You must have forgotten one of the packages. #angular/material also needs #angular/cdk for this to work.
You can check that the code is working here.
Link to stackblitz
Related
I'm working with Angular 9, and trying to assign html code to a variable and then add it to the main html code using innerHtml. Here is my code:
app.component.ts:
myVariable=`<div class="row">
<button class="button button-1 text-center mx-auto"
routerLink="/myForm">
<i class="fas fa-hotel"></i>Go to the next page</button>
</div>`
ngOnInit(): void {
document.getElementById('mainText').innerHTML = this.myVariable ;
}
Everything is working fine except for the routerLink which is not redirecting to the Url "/myForm" as expected.
app.component.html:
<mat-dialog-content>
<section>
<div class="container-fluid" id="mainText">
</div>
</section>
</mat-dialog-content>
NB: The routing works correctly when added directly in app.component.html so it's not a RouterModule importing problem.
I am currently working on a web application using angular and angular material. The page in question holds several profiles each with a button that when clicked removes the information currently showing and replaces it with the rest of the profile information. The issue is that when I click this button on one profile it does this information flip on all the profiles at once. I need help figuring out how to have the button only affect the profile it is associated with.
I am still relatively new to coding, so I've mainly been doing research on advice on how to approach this particular situation, but nothing I've found so far has worked.
<mat-card class="bpBuddyCont" *ngFor= "let profile of profileList">
<div>
<ul class="bpBuddies">
<li class="li2">
<div *ngIf="!showHiddenInfo">
<mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
<mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
<mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
</div>
<div class="column4" *ngIf="showHiddenInfo">
<span class="details4">Additional Notes: </span>
<span class="details3">{{profile.additionalNotes}}</span>
</div>
</div>
<button mat-button color="primary" class="btn" (click)="showHiddenInfo = !showHiddenInfo">{{showHiddenInfo ? 'Back' : 'More...'}}</button>
</li>
</ul>
</div>
</mat-card>
You can extend the profile object with
profile.showHiddenInfo and set it as false initially.
For this in your js(most probably the component file) after getting profileList,
profileList.forEach((profile, index) => {
angular.extend(profile, {showHiddenInfo: false});
//not sure about this angular.extend but you need to extend your object here
});
Now when the button is clicked replace showHiddenInfo, i.e.
profile.showHiddenInfo = !profile.showHiddenInfo;
And Replace
*ngIf="showHiddenInfo"
with
*ngIf="profile.showHiddenInfo"
You can do this using one boolean variable for each object, as profile.isExpanded and on click change it as like:
(click)="profile.isExpanded = !profile.isExpanded"
HTML Code:
<mat-card class="bpBuddyCont" *ngFor="let profile of profileList">
<div>
<ul class="bpBuddies">
<li class="li2">
<div *ngIf="!profile.isExpanded">
<mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
<mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
<mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
</div>
<div class="column4" *ngIf="profile.isExpanded">
<span class="details4">Additional Notes: </span>
<span class="details3">{{profile.additionalNotes}}</span>
</div>
<button mat-button color="primary" class="btn" (click)="profile.isExpanded = !profile.isExpanded">{{profile.isExpanded ? 'Back' : 'More...'}}</button>
</li>
</ul>
</div>
</mat-card>
No change in TS file.
WORKING STACKBLITZ
Actually I am using pagination in web page,i am putting one condition ng-if="id !== 0" if this code is true then it will hide some portion if its false its showing that portion.My problem is if condition is false then it showing that portion but pagination is not working when i am clicking on next its not going to the word.but if i am using the same condition in ng-show its working fine pagination is also working.Please help me whats going on there i am unable to understand.
Here is my code..
<div class="orphan-navigation col-md-12" ng-show="totalOrphans !== 0">
<div class="col-md-2 pull-left orphan-count">
{{id}} / {{totalOrphans}}
</div>
<div class="navigation-button-container pull-right">
<uib-pagination total-items="totalOrphans" ng-model="id" max-size="limitPages" ng-change="orphanChanged()" items-per-page="1">
</uib-pagination>
</div>
</div>
<div class="col-md-12 orphan-text-label" ng-show="totalOrphans !== 0">
<div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
<div class="col-xs-4 small-left-margin label orphan-key searchText">{{orphanData.orphan.attributes.text}}</div>
</div>
in above code i have used ng-show="totalOrphans !== 0" for ng-show my pagination is working fine when i am clicking in next button its highlighting other words.thats i want result.
but if i used ng-if instead of ng-show my pagination is not working,its not highlighting next word when i am clicking on next.
here i am attaching image of my web page.
if someone has still not understand my question please comment here ,i will try to clarify you thanks in advance,
ng-if will create it's own scope. Also uib-pagination creates it's own scope and probably use its parent scope to create your pagination. Now if the ng-if has it's own scope uib-pagination can't use the scope paramater from you controller.
For this reason there is the ControllerAs Syntax.
To use it you need to define it in ng-controller like: ng-controller="AppCtrl as vm".
Inside your controller you need to define 'vm' with 'this':
app.controller('AppCtrl', [function() {
var vm = this
vm.id = 5;
}]);
Now you can use the id inside the HTML like this:
<div ng-controller="AppCtrl as vm">
<span>{{vm.id}}</span>
</div>
As an example your code with ng-if that you provided need to look like this:
<div class="orphan-navigation col-md-12" ng-if="vm.totalOrphans !== 0">
<div class="col-md-2 pull-left orphan-count">
{{vm.id}} / {{vm.totalOrphans}}
</div>
<div class="navigation-button-container pull-right">
<uib-pagination total-items="vm.totalOrphans" ng-model="vm.id" max-size="vm.limitPages" ng-change="vm.orphanChanged()" items-per-page="1">
</uib-pagination>
</div>
</div>
<div class="col-md-12 orphan-text-label" ng-if="vm.totalOrphans !== 0">
<div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
<div class="col-xs-4 small-left-margin label orphan-key searchText">{{vm.orphanData.orphan.attributes.text}}</div>
</div>
I have a component that show/hide element by clicking a button.
This is my html
<div *ngFor="let history of histories | sortdate: '-dateModified'">
<p><b>{{ history.remarks }}</b> - <i>{{history.dateModified | date:'short'}}</i></p>
<a href="google.com"
[class.datatable-icon-right]="history.$$expanded"
[class.datatable-icon-down]="!history.$$expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(history)"></a>
<!-- hide/show this by clicking the button above.-->
<div *ngFor="let step of history.steps; let i = index">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
<hr />
</div>
and my .ts
toggleExpandRow(row) {
console.log('Toggled Expand Row!', row);
//row
return false;
}
trying to search but, can't find any same sample.
On jquery, I can do this, but on Angular2, I am having hard time to figure this.
There are two options:
1- You can use the hidden directive to show or hide any element
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
2- You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.
<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
Use the ngIf in your repeated rows. Create a boolean property called showStep to indicate whether the row should be expanded or not.
<div *ngFor="let step of history.steps; let i = index" ngIf="history.showStep">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
Then, in your .ts file:
toggleExpandRow(history) {
history.showStep = !history.showStep
//note the same porperty of showStep that is used in your html
}
Extra:
In fact, to save a few lines of codes, you don't even need the toggleExpandRow function at all. You can do it inline in your html:
//other attributes omitted for brevity
<a (click)="history.showStep = !history.showStep">
The html code goes something like this:
<div ng-if="name=='John'">
<div class="item item-avatar"> <img ng-src="john.jpg"></div>
</div>
<div ng-if="name=='Margaret'"
<div class="item item-avatar"> <img ng-src="margaret.jpg"></div>
</div>
Instead of ng-if, I've tried using ng-show as well. Neither worked. Both John as well as Margaret showed on the page no matter which I used. I tried with ng-switch also.
The variable 'name' I initialized earlier on the same HTML file as:
<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>
Clicking on the above line leads to Page3 where I need to display either John or Margaret depending on the value of 'name'.
Is the syntax wrong or something, because that could be very well possible. I'm new to Ionic and AngularJS.
Try this:
<div ng-show="name=='John'" ng-init="name = 'John'">
<div class="item item-avatar"> John</div>
</div>
<div ng-show="name=='Margaret'"
<div class="item item-avatar"> Margaret</div>
</div>
Works for me. I just change ng-if to ng-show - which will shows div content when true and hide it otherwise. I also use ng-init inside a div.
Are you sure you started Angular? Did you set the ng-app directive?
It would help if you could provide a working example if you have other problems.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="name = 'John'">
<button type="button" ng-click="name='John'">John</button>
<button type="button" ng-click="name='Margaret'">Margaret</button>
<div ng-if="name=='John'">
This is John
</div>
<div ng-if="name=='Margaret'">
This is Margaret
</div>
</div>
I fixed you plunker - now it should be working.
Bug #1: ng-init is for initialization not to set values at runtime -> use ng-click instead
Bug #2: You use the same controller for all pages but for each page a new controller will be initialized, which resets the 'name' property
I implemented a setName function to set the name in the rootscope and to go to page3. In a correct implementation you should pass the name as a $stateparam to the new state/page. But for that please have a look at the ui-router documentation.
$scope.setName = function(name) {
console.log(name);
$rootScope.name = name;
$state.go('Page3');
};