Hello fellow Angular and Stack Overflow users! I'm still getting the hang of Angular 4 and need some guidance. Can someone tell me if it's possible to pass an array value in the element binding in Angular 4?
My goal is to dynamically change the color of the #jediSign based on whether or not a student is a Jedi!
Here's the template code:
<div *ngIf="student">
Student: <a href="#" (click)="clicked()">{{student?.name}}</a>
<br/>
<div *ngIf="student?.isJedi">
Jedi Temple: {{student?.temple}} <br/>
</div>
<div #jediSign class="jediSign"></div>
<button (click)="jediSign.style.background='lightgreen'">Is Jedi?
</button>
</div>
And here's the component code:
export class AppComponent {
students: Student[] = [
{
name: 'Luke',
isJedi: true,
temple: 'Coruscant',
color: 'lightgreen'
},
{
name: 'Leia',
isJedi: false,
color: 'red'
},
{
name: 'Han Solo',
isJedi: false,
color: 'red'
}
]
}
Any ideas on how I can change the color from 'lightgreen' to students.color?
I've uploaded this code on GitHub for pull requests. Your help is greatly appreciated!
Thank you in advance!