CSS сыныптарын Angular-да байланыстыру
Angular-да блок үшін CSS сыныбын қолдануды қосу-өшіруге болады. Бұл тегдің келесі форматта жазылған атрибуты арқылы жасалады:
[class.сынып_аты]="true немесе false"
Тәжірибеде қарастырайық. Бізде келесі сыныптар бар делік:
.blue {
color: blue;
}
.bold {
font-weight: bold;
}
Мысалдар арқылы, осы сыныптарды блок үшін қалай қосу және өшіруге болатынын қарастырайық.
Мысал
Бір сыныпты қосып, екіншісін өшірейік:
<div [class.blue]="true" [class.bold]="false">
text
</div>
Мысал
Сыныптардың күйлері класс қасиеттерінде сақталады делік:
export class AppComponent {
public isBlue: boolean = true;
public isBold: boolean = false;
}
Сыныптың көрінуін біздің қасиеттердің мәндеріне байланысты байланыстырайық:
<div [class.blue]="isBlue" [class.bold]="isBold">
text
</div>
Практикалық тапсырмалар
Келесі CSS сыныбы берілген:
.hidden {
visibility: hidden;
}
Бұл сыныпты блокке байланыстырыңыз. Басылуымен блокті жасыратын не көрсететін батырма жасаңыз.