Как обработать случай в AngularJS 2, где при щелчке элемента ему нужно изменить свой собственный стиль, а если другие элементы имеют этот стиль, им нужно удалить его - предпочтительно в одну функцию.
Аналогично Angular.js Как изменить класс класса css на клик и удалить все остальные, только в AngularJS 2, используя TypeScript.
Компонент
https://plnkr.co/edit/Q2BoU4sNnXdaJB5vrZ8h?p=preview
//our root app component
import { NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
> I'm a div that gets styled on click
</div>
<div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
> I also want to be styled but only when Im clicked
</div>
<div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
> When one of us gets clicked the we want to be the only one with the style all others go back to normal
</div>
<div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
> I'm just here cause my creator likes even numbers
</div>
</div>
`,
styles: [
`
.my-class {
background-color: yellow;
}
`
]
})
class App {
isClassVisible: false;
constructor() {
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
