Angular 2 *ngIf for 'this' - javascript

In Angular 2 I have this component.html:
<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text" *ngIf="iscalled" />
<div id="container">
<button class="btn btn-warning editsection (click)="editAction()">Edit</button>
</div>
</li>
with this component.ts:
editAction(){ this.iscalled = true; }
iscalled is, by default, set to false in my component.
Basically, for each something of somethings I produce, along with my list is an input field that is assigned to it, and a button that runs editAction(). The button is only there if the user clicks on the editAction() button.
Now, as is, clicking on the editAction() button will enable all input fields in my list. I would like to restrict this to the exact li element that it is meant for.
I don't know if Angular 2 has a specific action for this, or if this is a plain javascript solution.

NOTE: with this setup don't set default value of iscalled to false
<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text"
*ngIf="something.iscalled" /> //<<<===changed
<div id="container">
<button class="btn btn-warning
editsection
(click)="editAction(something)"> //<<<===changed
Edit
</button>
</div>
</li>
editAction(something){ something.iscalled = true; }
if you want to toggle it then you can do following,
editAction(something){ something.iscalled != something.iscalled; }

Related

How to show only one ul at a time in angular using ngFor

I have the above image which has Add Person button, on click of Add person, Person 1 row gets created and so on. On the right end of each row, I have a share icon, on click of an icon, I wanted to open a ul element. The problem is the number of popups that gets displayed depends on the number of rows. If 5 rows are added, then 5 popups are displayed. Ideally, I need only one popup to be displayed, for Person 4 row it should be the popup with 33( basically the popup the is present for that particular row). I tried to add *ngIf = i> 1 condition, but the popup with 00 is only displayed every time which is not correct because the popup position will always be in parallel to Person 1 position.
<div>
<div *ngFor="let person of persons; let i = index">
<div>
<div class="userIcon">
<div>
<img class="person-img" src="assets/images/person.png" alt="My Profile">
</div>
<div>
<input id="form3" class="form-control" type="text">
<label for="form3" class="">{{person.name}}</label>
</div>
</div>
</div>
<div>
<div>
<input id="form5" class="form-control" #enteramount type="text">
<a class='dropdown-trigger sharebtn' href='#' data-target='dropdown{{i}}' (click)="shareIconClicked($event, i, enteramount)"></a>
{{i}}
<ul id='dropdown{{i}}' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
<li> {{i}}
Copy Message
</li>
<li>Whatsapp</li>
<li>Email</li>
</ul>
</div>
</div>
</div>
</div>
Below image represents the single popup after adding ngIf = 'isFirst'. I have clicked the Person 4 share icon. If I click the Person 3 share or Person 5 share icon, the popup is always positioned on the first row.
Just add check for first using *ngFor like this -
<div *ngFor="let person of persons; first as isFirst">
....
<ul id='dropdown{{i}}' *ngIf='first' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
...</ul>
</div>
For more in details refer official docs -
https://angular.io/api/common/NgForOf
You should try angular Mat-menu feature like this.
<div *ngFor="let person of persons; first as isFirst">
.... code
<button mat-button [matMenuTriggerFor]="menu">Share</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="sharteWithFacebook(person)">Facebook</button>
<button mat-menu-item (click)="shareWithWhatapp(person)">Whatsapp</button>
</mat-menu>
</div>

How do I toggle a class in Angular

I have a button that I want to be able to toggle a class on a div to hide and show the div how would I do that in Angular?
HTML
<div id="chatsidebar">
<app-chatsidebar></app-chatsidebar>
</div>
<div>
<button type="button" id="sidebarCollapse" class="btn btn-info" (click)="togglesideBar()">
<i class="glyphicon glyphicon-align-right"></i>
Toggle Sidebar
</button>
</div>
I want to add the class "active" onto the #chatsidebar div
app.component.ts
togglesideBar() {
}
Thanks
I'm answering this part of your question:
I want to add the class "active" onto the #chatsidebar div
To do it, you can use NgClass. NgClass allows you to add or remove any class to or from an element based on the given condition. Your code will looks something like this:
HTML
<div id="chatsidebar" [ngClass]="{'active': isSideBarActive}"> <!-- this ngClass will add or remove `active` class based on the `isSideBarActive` value -->
<app-chatsidebar></app-chatsidebar>
</div>
<div>
<button type="button" id="sidebarCollapse" class="btn btn-info" (click)="togglesideBar()">
<i class="glyphicon glyphicon-align-right"></i>
Toggle Sidebar
</button>
</div>
Component
isSideBarActive: boolean = true; // initial value can be set to either `false` or `true`, depends on our need
togglesideBar() {
this.isSideBarActive = !this.isSideBarActive;
}
HTML
<div id="chatsidebar" *ngIf="status">
<app-chatsidebar></app-chatsidebar>
</div>
<div>
<button type="button" id="sidebarCollapse" class="btn btn-info" (click)="togglesideBar()">
<i class="glyphicon glyphicon-align-right"></i>
Toggle Sidebar
</button>
</div>
app.component.ts:
status:boolean=true;
togglesideBar() {
if(this.status == true) this.status=false;
else this.status = true;
}
Demo:
https://plnkr.co/edit/fNoXWhUhMaUoeMihbGYd?p=preview
you can try below.
<div id="chatsidebar" class="{{activeClass}}"> ... </div>
and on your component define a property and set the class value on toggle function
// On Component
activeClass : string = "";
...
togglesideBar() {
this.activeClass = 'active'
}
it shall work, but may not the ideal solution.
Assuming you have a class named hide:
<div [class.hide]="hide">
<app-chatsidebar></app-chatsidebar>
</div>
<div>
<button type="button" class="btn btn-info" (click)="togglesideBar()">
<i class="glyphicon glyphicon-align-right"></i>
Toggle Sidebar
</button>
</div>
togglesideBar() { this.hide = !this.hide; }
This will hide the element in question, while leaving it in the DOM. The other solutions using *ngIf will add and remove the element to and from the DOM. There are subtle reasons in specific cases to prefer one over the other, well described in the on-line documentation you have already read. In this case, it doesn't really matter.
The [class.className]=boolean format is just one of several ways to control classes in Angular. For instance, you could also have said:
[ngClass]="{'hide': hide}"
This is slightly more flexible because you can add/remove multiple classes at once.
Since you are using glyphicons, you are probably using Bootstrap, so you most likely already have the hide class defined.
As an aside, you rarely need IDs, and using them is pretty much of an anti-pattern in Angular.
Take a variable in your component something like
isShowChatSidebar:boolean=true;
then modify your method and html
togglesideBar() {
this.isShowChatSidebar=!this.isShowChatSidebar
}
<div id="chatsidebar" [ngClass]="{'active': isShowChatSidebar}">>
<app-chatsidebar></app-chatsidebar>
</div>

How to display a hidden div on button click and hide the clicked button in Angular 2?

I'm facing difficulties in Angular UI development. Here I'm having a requirement that:
on click of Add Button it should show a hidden form:
on click of Add Button -> Add Button should hide
in hidden form there will be a button Cancel-
if I click on cancel the form should hide and add button should return
I have tried this using Angular 2 template syntax and by declaring nested boolean values, but I'm not getting the perfect answer.
How to do this in Angular 2 or 4? Do I have to use any host Listener or event emitter for this? I'm sharing my sample code and plunker:
template.html
<button(click)="addParameter=addParameter==true?false:true">
Add</button>
<div class="Parameters" *ngIf="addParameter==true">
<input name="hello">
<button (click)="hideForm();">Cancel</button>
</div>
test.ts
export class App {
private addParameter:boolean=false;
}
https://plnkr.co/edit/fa3Pdea1mB4RztAgOAW2?p=preview
You can do this in a couple of ways. Depending on if you want to handle it in component or in template. I personally prefer to keep template clean and do the "work" in component. So in that case your code would simply look like this:
<button *ngIf="!addParameter" (click)="toggleForm()">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="toggleForm()">Cancel</button>
</div>
and TS:
toggleForm() {
this.addParameter = !this.addParameter
}
DEMO: http://plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p=preview
and as said, if you want to do this in template, it would look like this:
<button *ngIf="!addParameter" (click)="addParameter = !addParameter">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="addParameter = !addParameter">Cancel</button>
</div>
DEMO: https://plnkr.co/edit/xcSzXGWOMNIhuZ83OXbs?p=preview
I think what you're looking for is something like:
<div>
<form>
<input name="hello">
<button *ngIf="addingForm===false" (click)="addingForm = true">Add</button>
<button *ngIf="addingForm===true" (click)="addingForm = false">Cancel</button>
</form>
<form *ngIf="addingForm===true">
<input name="hidden">
</form>
</div>
In TS:
addingForm = false;
Like here: https://plnkr.co/edit/uXztfHwdWxuTVNIg6sxA?p=preview

How to override an external html template angular.js

I'm using this https://github.com/amitava82/angular-multiselect multiselect dropdown for my project.
In my html:
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="nameList.name"
options="name as name.key for name in nameList"
multiple="true"
</am-multiselect>
This dropdown has a "checkall" and "uncheckall" button in the dropdown, which I WANT to remove, while keeping the functionality of the multi-select.
This is the html in the directive the guy uses:
src/multiselect.tmpl.html
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}">
{{header}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<input class="form-control input-sm" type="text" ng-model="searchText.label" ng-keydown="keydown($event)" autofocus="autofocus" placeholder="Filter" />
</li>
<li ng-show="multiple" role="presentation" class="">
<button class="btn btn-link btn-xs" ng-click="checkAll()" type="button"><i class="glyphicon glyphicon-ok"></i> Check all</button>
<button class="btn btn-link btn-xs" ng-click="uncheckAll()" type="button"><i class="glyphicon glyphicon-remove"></i> Uncheck all</button>
</li>
<li ng-repeat="i in items | filter:searchText" ng-class="{'selected': $index === selectedIndex}">
<a ng-click="select(i); focus()">
<i class='glyphicon' ng-class="{'glyphicon-ok': i.checked, 'empty': !i.checked}"></i> {{i.label}}</a>
</li>
</ul>
</div>
I wan't to just remove/override the checkall and uncheckall buttons WITHOUT editing this library's directive. I can override the CSS in my personal file.css, but how do I override the HTML template he uses. Thanks
I see 3 ways you could do it:
Add your own template to replace this one like this (reference):
<script type="text/ng-template" id="multiselect.tmpl.html">
html template without buttons here
</script>
The potential issue with this is that you would be overriding this template everywhere it's used. But maybe you are using this in a bunch of places and that makes sense.
Add a decorator to the directive that removes the part of the template you don't want during the compile phase and allows the rest of the directive to perform as usual:
decorator('amMultiselectPopupDirective' ['$delegate', function($delegate) {
var directive = $delegate[0];
var compile = directive.compile;
directive.compile = function(tElement, tAttrs) {
var link = compile.apply(this, arguments);
if (tAttrs.disableCheckAll) {
tElement.find('li[ng-show="multiple"]').remove();
// this code could be different, but the gist is that it would remove or hide the stuff you don't want
}
return function() {
link.apply(this, arguments);
};
};
return $delegate;
}]);
The potential issue here is that you would be changing the template for this directive everywhere the directive is used. That's why in my example I made the template change conditional based on some attribute you could define, like disableCheckAll.
Use template-url attribute that is already defined for this directive and create your own template that doesn't have these buttons:
<script type="text/ng-template" id="yourowntemplate.html">
html template without buttons here
</script>
<am-multiselect ...
template-url="yourowntemplate.html">
</am-multiselect>
I would say 3 is probably the best way to do it. But 1 could work better if you wanted to override the default, and then you wouldn't have to pass in the template-url everytime you use the am-multiselect directive.
Edit: Here is a working example for 3: http://plnkr.co/edit/m0lZSHUJ8MHslqCNPnCc?p=info
Overlap his directive with your own div with class: "no-btns"
Add this css:
.no-btns .dropdown-menu li:nth-child(2) {display:none;}
Example:
<style>
.no-btns .dropdown-menu li:nth-child(2) {
display:none;
}
</style>
<div class="no-btns">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="nameList.name"
options="name as name.key for name in nameList"
multiple="true"
</am-multiselect>
</div>

Click button to copy text to another div with angularjs

I have a list of Items with different button with them. Plunker
Quick View:
I want something like if I click on any of the buttons, related text will be copy to the div above. Also if I click on the button again it will removed from the Div.Same for each of the buttons. [I added manually one to show how it may display ]
I am not sure how to do that in Angular. Any help will be my life saver.
<div ng-repeat="item in csTagGrp">
<ul>
<li ng-repeat="value in item.csTags">
<div class="pull-left">
<button type="button" ng-class='{active: value.active && !value.old}' class="btn btn-default btn-xs">{{value.keys}}</button>
<span>=</span>
</div>
<div class="pull-left cs-tag-item-list">
<span>{{value.tags}}</span>
</div>
</li>
</ul>
</div>
The simplest thing would be to use $scope.tags object to store selected tags and add/remove them with the scope method similar to this:
$scope.tags = {};
$scope.toggleTag = function(tag) {
if (!$scope.tags[tag]) {
$scope.tags[tag] = true;
}
else {
delete $scope.tags[tag];
}
};
Demo: http://plnkr.co/edit/FrifyCrl0yP0T8l8XO4K?p=info
You can use ng-click to put in your scope the selected value, and then display this value instead of "Win".
http://plnkr.co/edit/IzwZFtRBfSiEcHGicc9l?p=preview
<div class="myboard">
<span>{{selected.tags}}</span>
</div>
...
<button type="button" ng-click="select(value)">{{value.keys}}</button>

Categories