src/table/header/table-header.component.ts
AfterContentInit
| selector | cds-table-header, ibm-table-header |
| template | |
Properties |
Methods |
HostBindings |
| class.cds--data-table-header |
Type : boolean
|
Default value : true
|
| class.cds--data-table-header__with-decorator |
Type : boolean
|
Default value : false
|
| class.cds--data-table-header__with-decorator--standalone |
Type : boolean
|
Default value : false
|
| style.display |
Type : string
|
Default value : "block"
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Returns :
void
|
| decorator |
Type : TableHeaderDecorator
|
Decorators :
@ContentChild(TableHeaderDecorator)
|
| decoratorStandalone |
Default value : false
|
Decorators :
@HostBinding('class.cds--data-table-header__with-decorator--standalone')
|
| displayStyle |
Type : string
|
Default value : "block"
|
Decorators :
@HostBinding('style.display')
|
| hasDecorator |
Default value : false
|
Decorators :
@HostBinding('class.cds--data-table-header__with-decorator')
|
| headerClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--data-table-header')
|
| headerDescription |
Type : TableHeaderDescription
|
Decorators :
@ContentChild(TableHeaderDescription)
|
| headerTitle |
Type : TableHeaderTitle
|
Decorators :
@ContentChild(TableHeaderTitle)
|
import {
AfterContentInit,
Component,
ContentChild,
HostBinding
} from "@angular/core";
import { TableHeaderDescription } from "./table-header-description.directive";
import { TableHeaderTitle } from "./table-header-title.directive";
import { TableHeaderDecorator } from "./table-header-decorator.component";
@Component({
selector: "cds-table-header, ibm-table-header",
template: `
<div class="cds--data-table-header__content">
<ng-content></ng-content>
</div>
<ng-content select="cds-table-header-decorator, ibm-table-header-decorator"></ng-content>
`
})
export class TableHeader implements AfterContentInit {
@HostBinding("class.cds--data-table-header") headerClass = true;
@HostBinding("style.display") displayStyle = "block";
@HostBinding("class.cds--data-table-header__with-decorator") hasDecorator = false;
@HostBinding("class.cds--data-table-header__with-decorator--standalone") decoratorStandalone = false;
@ContentChild(TableHeaderDecorator) decorator: TableHeaderDecorator;
@ContentChild(TableHeaderTitle) headerTitle: TableHeaderTitle;
@ContentChild(TableHeaderDescription) headerDescription: TableHeaderDescription;
ngAfterContentInit() {
this.hasDecorator = !!this.decorator;
this.decoratorStandalone =
this.hasDecorator && !this.headerTitle && !this.headerDescription;
this.displayStyle = this.hasDecorator ? "flex" : "block";
}
}