tamu-library-components documentation
  1. Components
  2. TlButtonComponent

File

projects/tl-elements/src/lib/tl-button/tl-button.component.ts

Extends

TamuAbstractBaseComponent

Metadata

changeDetection ChangeDetectionStrategy.Default
selector tl-button-component
styleUrls ./tl-button.component.scss
templateUrl ./tl-button.component.html

Index

Properties
Inputs
HostBindings

Constructor

constructor(injector: Injector)
Defined in projects/tl-elements/src/lib/tl-button/tl-button.component.ts:28
Parameters :
Name Type Optional
injector Injector No

Inputs

btnSize
Type : string
Default value : ''
Defined in projects/tl-elements/src/lib/tl-button/tl-button.component.ts:16

Used to define the size for button component.
btnTxt
Type : any
Defined in projects/tl-elements/src/lib/tl-button/tl-button.component.ts:24
dispatchAction
Type : string
Default value : 'Store.Action'
Defined in projects/tl-elements/src/lib/tl-button/tl-button.component.ts:26
dispatchActionProps
Type : string
Default value : '{}'
Defined in projects/tl-elements/src/lib/tl-button/tl-button.component.ts:28
href
Type : any
Defined in projects/tl-elements/src/lib/tl-button/tl-button.component.ts:22

Allows for the button component to be an anchor tag component if hrefUrl property present.
themeVariant
Type : any
Defined in projects/tl-elements/src/lib/tl-button/tl-button.component.ts:13

Used to override the button class.
wvrBtnType
Type : string
Default value : 'button'
Defined in projects/tl-elements/src/lib/tl-button/tl-button.component.ts:19

Used to define the type of a button.
inheritFontStyle
Type : "true" | "false"
Inherited from TamuAbstractBaseComponent
Defined in TamuAbstractBaseComponent:14

HostBindings

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.

Properties

_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 { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';

@Component({
  selector: 'tl-button-component',
  templateUrl: './tl-button.component.html',
  styleUrls: ['./tl-button.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class TlButtonComponent extends TamuAbstractBaseComponent {

  /** Used to override the button class. */
  @Input() themeVariant;

  /** Used to define the size for button component.  */
  @Input() btnSize = '';

  /** Used to define the type of a button.  */
  @Input() wvrBtnType = 'button';

  /** Allows for the button component to be an anchor tag component if hrefUrl property present. */
  @Input() href;

  @Input() btnTxt;

  @Input() dispatchAction = 'Store.Action';

  @Input() dispatchActionProps = '{}';

  // tslint:disable-next-line:unnecessary-constructor
  constructor(injector: Injector) {
    super(injector);
  }

}

<tl-button-wrapper #animationRoot>
  <wvr-button-component
    *ngIf="href!== ''"
    [themeVariant]="themeVariant"
    [btnSize]="btnSize"
    [btnTxt]="btnTxt"
    [dispatchAction]="dispatchAction"
    [dispatchActionProps]="dispatchActionProps"
    [href]="href"
    [wvrBtnType]="wvrBtnType">
    <ng-content select="template[button-content]" ngProjectAs="template[button-content]"></ng-content>
  </wvr-button-component>
  <wvr-button-component
    *ngIf="href === ''"
    [themeVariant]="themeVariant"
    [btnSize]="btnSize"
    [btnTxt]="btnTxt"
    [dispatchAction]="dispatchAction"
    [dispatchActionProps]="dispatchActionProps"
    [wvrBtnType]="wvrBtnType">
    <ng-content select="template[button-content]" ngProjectAs="template[button-content]"></ng-content>
  </wvr-button-component>
</tl-button-wrapper>

./tl-button.component.scss 

@import "../shared/styles/tl-variables.scss";

:host {

    wvr-button-component {
      ::ng-deep {
        a {
          color:#00648B;
          text-decoration: none;
        }
        a:hover {
          color:#003F58;
        }
      }
    }

  }
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""