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>
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';
}
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>
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: