unopinionated-angular-toolbox documentation
  1. Components
  2. UATToggle

File

src/app/lib/toggle/toggle.component.ts

Metadata

exportAs uatToggle
host {
}
selector [uat-toggle]
styleUrls toggle.component.css
templateUrl ./toggle.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Constructor

constructor()
Defined in src/app/lib/toggle/toggle.component.ts:29

Inputs

state

Type: boolean

Defined in src/app/lib/toggle/toggle.component.ts:16

Outputs

onToggle $event type: EventEmitter
Defined in src/app/lib/toggle/toggle.component.ts:25

HostBindings

class.uat-toggle
class.uat-toggle:
Default value : true
Defined in src/app/lib/toggle/toggle.component.ts:14

Methods

ngAfterViewChecked
ngAfterViewChecked()
Defined in src/app/lib/toggle/toggle.component.ts:38
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/lib/toggle/toggle.component.ts:35
Returns : void
onClick
onClick(e: MouseEvent)
Defined in src/app/lib/toggle/toggle.component.ts:41
Parameters :
Name Type Optional Description
e MouseEvent
Returns : void
onMouseEnter
onMouseEnter(e: MouseEvent)
Defined in src/app/lib/toggle/toggle.component.ts:46
Parameters :
Name Type Optional Description
e MouseEvent
Returns : void

Properties

Private _state
_state:
Default value : false
Defined in src/app/lib/toggle/toggle.component.ts:27
Private wasClicked
wasClicked:
Default value : false
Defined in src/app/lib/toggle/toggle.component.ts:29

Accessors

state
getstate()
Defined in src/app/lib/toggle/toggle.component.ts:21
setstate(s: boolean)
Defined in src/app/lib/toggle/toggle.component.ts:16
Parameters :
Name Type Optional Description
s boolean
Returns : void 
import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';

@Component({
  selector: '[uat-toggle]',
  templateUrl: './toggle.component.html',
  styleUrls: ['./toggle.component.css'],
  host: {
    '(click)':"onClick($event)",
    '(mouseenter)': "onMouseEnter($event)"
  },
  exportAs: 'uatToggle'
})
export class UATToggle {
  @HostBinding('class.uat-toggle') applyHostClass = true;

  @Input() set state(s:boolean) { 
    this._state = s;
    this.onToggle.next(this._state);
  }

  get state() {
    return this._state;
  }

  @Output() onToggle = new EventEmitter<boolean>();

  private _state = false;

  private wasClicked = false;

  constructor() {
    throw new Error('Not implemented');
   }

  ngOnInit() {
  }

  ngAfterViewChecked() {
  }

  onClick(e: MouseEvent) {
    this.state = !this.state;
    this.wasClicked = true;
  }

  onMouseEnter(e: MouseEvent) {
    if(!this.wasClicked) {
    }
    this.wasClicked = false
  }
}

<div *ngIf="!state">
  <ng-content select="[uat-open]"></ng-content>
</div>
<div *ngIf="state">
  <ng-content select="[uat-close]"></ng-content>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""