Angular կոմպոնենտի սթայլեր

Եկեք հիմա սթայլիզացնենք մեր վերստքը CSS-ի միջոցով: Դրա համար մեզ օգտակար կլինի app.component.css ֆայլը, որտեղ գրվում են կոմպոնենտի վերստքի CSS սթայլերը: Այդ ընթացքում Angular-ն ինքն է հոգում, որ սթայլերը աշխատեն ինչպես CSS մոդուլ: Սա նշանակում է, որ բոլոր սելեկտորները կաշխատեն միայն կոմպոնենտի վերստքի համար և չեն գրավի դրսի վերստքը:

Եկեք տեսնենք գործնականում: Թող մեր կոմպոնենտում լինի հետևյալ վերստքը:

app/app.component.html<div>
  abcde
</div>

Եկեք գույն տանք div-ին:

app/app.component.cssdiv {
  color: red;
}

Այդ ընթացքում մենք կարող ենք վստահ լինել, որ սթայլը կկիրառվի միայն մեր կոմպոնենտի div-ների վրա, և ոչ մի այլ տեղ: