CODEWITHSUNDEEP
angulartypescriptangular2-directives
Alexander Solonik
Alexander Solonik

Reputation: 10240

Understanding angular/typescript setter property

I created the following Angular 2 directive:

import { Directive , Input , ViewContainerRef , TemplateRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {

  @Input() set appUnless(condition : boolean) {
    if(!condition) {
      this.vcRef.createEmbeddedView(this.templateRef)
    } else {
      this.vcRef.clear();      
    }
  }

  constructor(private templateRef: TemplateRef<any> , private vcRef: ViewContainerRef) { }

}

and i am using it in my main angular html file like so:

<div class="col-md-12">
      <p *appUnless="onlyOdd">UNLESS !!!!!!!!!!!!!</p>
    </div>

I am not quite understanding how the below code works:

@Input() set appUnless(condition : boolean) {
        if(!condition) {
          this.vcRef.createEmbeddedView(this.templateRef)
        } else {
          this.vcRef.clear();      
        }
      }

what exactly is appUnless , is it a property or a function or what exactly is it ?

Upvotes: 0

Views: 51

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657781

appUnless is a function that can be used like a property. This way you can create a property with additional behavior when a values is set or read.
That's all the getter and setter stuff is about.

Upvotes: 1

Related Questions