30.4. Dynamic Style Changes¶

30.4.1. Interactive Elements¶

Let's make the paragraph element respond to user clicks.

Change line 12 in skill-set.component.html by adding a (click) event:

 1<div class="skills">
 2   <h3>{{listHeading}}</h3>
 3   <ol [style.color]="alternateColor" [type]="bulletType">
 4      <li *ngFor="let skill of skills">{{skill}}</li>
 5   </ol>
 6   <hr>
 7   <h3>Copy of Skill List</h3>
 8   <ol [class.ol-style]="changeColor">
 9      <li *ngFor="let skill of skills">{{skill}}</li>
10   </ol>
11   <hr>
12   <p [class.p-style]="!changeColor" (click)="changeColor = !changeColor">Here is some practice text...</p>
13</div>

Since changeColor is a boolean, (click)="changeColor = !changeColor" flips the value of the variable between true and false whenever the text is clicked.

Notice that since the style of the ordered list also depends on changeColor, its appearance changes as well.

30.4.2. Button Styling¶

The button tag accepts class and style just like other HTML elements, but button also has its own set of special attributes. Detailed descriptions of these attributes appear at W3 schools and MDN. However, for these examples we will focus on disabled.

Adding the disabled attribute inside the tag deactivates the button. Any time you see a greyed out button on a web page, disabled is the cause.

Example

Code:

1<button [style.background]="lcLightBlue">Click Me!</button>
2<button disabled>Can't Click Me!</button>

Result:

The disabled attribute overrides any other function calls or events within the button tag.

30.4.2.1. Dynamic Button Activation¶

Data-binding lets us activate or deactivate buttons based on user actions or variables we control.

Open the buttons.component.html and buttons.component.ts files and examine the code.

Examples

HTML file:

1<div class="buttons">
2   <h3>{{buttonHeading}}</h3>
3   <button class="gold">Gold</button> <br>
4   <button class="silver">Silver</button> <br>
5   <button class="copper">Copper</button> <hr>
6   <button>Activate/Deactivate Buttons</button>
7</div>

ButtonsComponent class in the .ts file:

1export class ButtonsComponent implements OnInit {
2   buttonHeading: string = "Buttons"
3   inactive: boolean = false;
4
5   constructor() { }
6
7   ngOnInit() { }
8
9}

To dynamically activate or deactivate a button, we need to bind the attribute to a boolean. In this case, we can use the inactive variable defined in the buttons.component.ts file.

1. Modify line 3 in the HTML file as follows:

   <button [class.gold]="!inactive" [disabled]="inactive" (click)="inactive = true">Gold</button> <br>
   

   Save your changes and refresh the web page. Now when you click on the "Gold" button, inactive gets set to true. This adds the disabled attribute to the HTML tag, turning it off. In addition, the gold class is removed, changing the color of the button.

2. Since the "Gold" button is no longer active, clicking on it again will not trigger any events. To re-enable the button, we need to tie inactive to another tag and event.

3. Modify line 6 in the HTML file as follows:

   <button (click)="inactive = !inactive">Activate/Deactivate Buttons</button>
   

The buttons on the page should now behave something like:

30.4.2.1.1. Silver and Copper¶

Modify the button tags for "Silver" and "Copper" so that they also depend on inactive. Properly done, clicking ANY of the buttons deactivates ALL of them:

If we want to disable only the button that gets clicked, then we will need to create a separate boolean variable for each element. We must also update the "Activate/Deactivate" button to reset all of the booleans to true. (Hint: How about setting the (click) event to a function call?)

30.4.3. Try It!¶

Modify the code in buttons.component.html and buttons.component.ts to make the buttons behave like this:

30.4.4. Bonus Try It!¶

Just for fun, use what you have learned about events and data binding to create buttons that behave like this:

30.4.5. Check Your Understanding¶

.special {
   background-color: blue;
}

1export class Component implements OnInit {
2
3   specialFactor: boolean = false;
4
5   constructor() { }
6
7   ngOnInit() { }
8
9}

1<div [class.special]="specialFactor">Very Special Content</div>