.large-text {
<p>Hello World</p>
To begin using the the ngClass directive, add it to the open tag of the element. Use the compact syntax to set the styles. Wrap it with the square brackets and begin inputting some values.
Add the large-text class. Because we already have the double quotes, we need to use single quotes to represent a string inside a string. Then we put the class that we want inside.
<p [ngClass]="large-text">Hello World</p>
<p [ngClass]="large-text green-text">Hello World</p>
Each class is separated with a space. To add another class, we would put another space and then add another class
[ngClass]="large-text green-text highlight"
Save the project and go to the browser.
Go to the app component TypeScript file. Declare 3 strings to represent the 3 css classes.
Declare another string and set the value with the 3 CSS classes. We will use this string to set the styles of the paragraph element in the HTML page.
myStyles = `${this.large-text} ${this.highlight} ${this.green-text}`;
<p [ngClass]="myStyles">Hello World</p>
Save the project and go to the browser.
<button (click)="onEnlarge()">Enlarge</button>
onEnlarge() {
myStyles = [ this.largeText, this.highlight, this.greenText ]
Save the project and go to the browser.
myStyles = {};
myStyles = { 'large-text': false, 'highlight': false, 'green-text': false};
onEnlarge() {
Do the same for the other two functions.
myStyles = { 'large-text highlight green-text': false };
Recap