angular-ng-class | 易学教程

Angular Built-in Directives are not working(ngClass, ngStyle, ngIf)

阅读更多关于 Angular Built-in Directives are not working(ngClass, ngStyle, ngIf)

问题 I am following Template syntax section for the application of built-in attribute and structural directives from here https://v4.angular.io/guide/template-syntax#ngclass currentClasses: {}; setCurrentClasses() { // CSS classes: added/removed per current state of component properties this.currentClasses = { 'saveable': this.canSave, 'modified': !this.isUnchanged, 'special': this.isSpecial }; } I add currentClasses to my html as per Angular documentation above: <div [ngClass]="currentClasses"

how to show/hide dynamic id of div's in angular2

阅读更多关于 how to show/hide dynamic id of div's in angular2

问题 Here a loop of kpiName is executed and inside loops of subRegion also executed. As a result 4 divs of class="col-xs-2" are created and inside it two div(clickable divs inside filter class) are created having dynamic Id as id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" which onclick calls some function. The requirement is when corresponding id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" is clicked show and hide id="filteredDataSubRegion{{index}

Difference between [ngClass] vs [class] binding

阅读更多关于 Difference between [ngClass] vs [class] binding

What is the difference in Angular 2 between the following snippets: <div [class.extra-sparkle]="isDelightful"> <div [ngClass]="{'extra-sparkle': isDelightful}"> This is special Angular binding syntax <div [class.extra-sparkle]="isDelightful"> This is part of the Angular compiler and you can't build a custom binding variant following this binding style. The only supported are [class.xxx]="..." , [style.xxx]="..." , and [attr.xxx]="..." ngClass is a normal Angular directive like you can build it yourself <div [ngClass]="{'extra-sparkle': isDelightful}"> ngClass is more powerful. It allows you to

Angular ngClass and click event for toggling class

阅读更多关于 Angular ngClass and click event for toggling class

问题 In Angular, I would like to use ngClass and click event to toggle class. I looked through online but some are angular1 and there isn't any clear instruction or example. Any help will be much appreciated! In HTML, I have the following: <div class="my_class" (click)="clickEvent($event)" ngClass="{'active': toggle}"> Some content </div> In .ts: clickEvent(event){ //Haven't really got far var targetEle = event.srcElement.attributes.class; } 回答1: This should work for you. In .html: <div class="my

Difference between [ngClass] vs [class] binding

阅读更多关于 Difference between [ngClass] vs [class] binding

问题 What is the difference in Angular 2 between the following snippets: <div [class.extra-sparkle]=\"isDelightful\"> <div [ngClass]=\"{\'extra-sparkle\': isDelightful}\"> 回答1: This is special Angular binding syntax <div [class.extra-sparkle]="isDelightful"> This is part of the Angular compiler and you can't build a custom binding variant following this binding style. The only supported are [class.xxx]="..." , [style.xxx]="..." , and [attr.xxx]="..." ngClass is a normal Angular directive like you

Angular: conditional class with *ngClass

阅读更多关于 Angular: conditional class with *ngClass

问题 What is wrong with my Angular code? I am getting: Cannot read property \'remove\' of undefined at BrowserDomAdapter.removeClass ... HTML <ol class=\"breadcrumb\"> <li *ngClass=\"{active: step===\'step1\'}\" (click)=\"step=\'step1; \'\">Step1</li> <li *ngClass=\"{active: step===\'step2\'}\" (click)=\"step=\'step2\'\">Step2</li> <li *ngClass=\"{active: step===\'step3\'}\" (click)=\"step=\'step3\'\">Step3</li> </ol> 回答1: Angular 2,..,7 provides several ways to add classes conditionally: type one