Attribute Directives

6. A. AIM: Apply multiple CSS properties to a paragraph in a component using ngStyle.

Step-1: Edit the app.component.html with the following code.

app.component.html

<div [ngStyle]="{'color':'white','background-color':'red'}">
  This is style directive presentation.
</div>

Step-2

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output:

---

6. B. AIM: Apply multiple CSS classes to the text using ngClass directive.

Step-1: Edit the app.component.css with the following code.

app.component.css

.myClass{
color: white;
background-color: blue;
}

.myClass2{
font-weight: bold;
font-family: 'jokerman';
}

Step-2: Edit the app.component.html with the following code.

app.component.html

<div [ngClass]="'myClass myClass2'">
  This is class directive presentation.
</div>

Step-3

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output: