今天就只是個筆記,單純記錄寫法如何使用,以便自己日後查找,畢竟人非聖賢、會忘難免 XD
css
套用 className
變數為 isDark,value 必需為 boolean
isDark = true;
在 html 的 dom 裡設定
<p [ngClass]="isDark ? dark : light">test</p>
<p [ngClass]="{'isDark': true}">test</p>
https://angular.tw/api/common/NgClass
Document difference between [NgClass] and [class] [NgClass] 與 [class] 之間的差異
style
在 html 的 dom 裡設定
<p
[ngStyle]="{'background-color': '#159', 'color':'#fff', 'font-size': '20px'}"
>
test
</p>
isDark = true;
<p [ngStyle]="isDark ? {'background-color': '#159', 'color':'#fff'} : {}">
test
</p>
若 屬性的值為 value
width = 60;
height = 20;
<p [ngStyle]="{'width.px': width, 'height.px': height}>test</p>
https://angular.tw/api/common/NgStyle
:host 設定宿主(host)的樣式
:host {
display: block;
border: 1px solid black;
}
在 css 裡加上條件式
:host(.active) {
border-width: 3px;
}
@HostBinding
在 ts 裡直接綁定 class 到 宿主上
@HostBinding() class = `hey`;
直接綁定 id 到 宿主上
@HostBinding() id = `hey`;
或是直接設定 style
@HostBinding() style = `background: #159;display: block;`;
套上變數
@Input() isColor!: string;
@HostBinding('style.background') get color() {
return this.isColor;
}
@HostBinding('class.value') get color() {
return true;
}
若是 return true,class 會掛載 value
這個 class name
@HostBinding('class') get color() {
return 'yoo';
}
若 HostBinding
裡的 只有 class,則需 return 出一個字串,return 出來的字串則為 class name