projects/tl-elements/src/lib/tl-modal/tl-modal.component.ts
selector | tl-modal-component |
styleUrls | ./tl-modal.component.scss |
templateUrl | ./tl-modal.component.html |
Properties |
Inputs |
HostBindings |
constructor(injector: Injector)
|
||||||
Parameters :
|
btnText | |
Type : any
|
|
btnVisible | |
Type : string
|
|
Default value : 'true'
|
|
title | |
Type : any
|
|
inheritFontStyle | |
Type : "true" | "false"
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:14
|
style.--tl-font-family-sans-serif |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
Inherited from
TamuAbstractBaseComponent
|
Defined in
TamuAbstractBaseComponent:12
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
style.--tl-font-size |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
Inherited from
TamuAbstractBaseComponent
|
Defined in
TamuAbstractBaseComponent:9
|
Allows for the override of the --tl-default-font-size css variable. |
btnThemeVariant |
Type : string
|
Default value : 'primary'
|
_fontFamily |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
Decorators :
@HostBinding('style.--tl-font-family-sans-serif')
|
Inherited from
TamuAbstractBaseComponent
|
Defined in
TamuAbstractBaseComponent:12
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
_fontSize |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
Decorators :
@HostBinding('style.--tl-font-size')
|
Inherited from
TamuAbstractBaseComponent
|
Defined in
TamuAbstractBaseComponent:9
|
Allows for the override of the --tl-default-font-size css variable. |
import { Component, Injector, Input } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
@Component({
selector: 'tl-modal-component',
templateUrl: './tl-modal.component.html',
styleUrls: ['./tl-modal.component.scss']
})
export class TlModalComponent extends TamuAbstractBaseComponent {
btnThemeVariant = 'primary';
@Input() title;
@Input() btnText;
@Input() btnVisible = 'true';
// tslint:disable-next-line:unnecessary-constructor
constructor(injector: Injector) {
super(injector);
}
}
<wvr-modal-component #animationRoot
[themeVariant]="btnThemeVariant"
[title]="title"
[btnText]="btnText"
[btnVisible]="btnVisible">
<ng-content select="template[modal-body]" ngProjectAs="template[modal-body]"></ng-content>
<ng-content select="template[modal-footer]" ngProjectAs="template[modal-footer]"></ng-content>
</wvr-modal-component>
./tl-modal.component.scss
@import "../shared/styles/tl-variables.scss";
:host {
wvr-modal-component {
font-family: var(--tl-font-family-sans-serif);
::ng-deep {
.wvr-modal {
font-family: var(--tl-font-family-sans-serif);
}
}
}
}