ExportAs feature in angular, Angular selector

Ref:

• https://netbasal.com/angular-2-take-advantage-of-the-exportas-property-81374ce24d26 (Export As example/doc *******)

for better uderstanding 

1. https://github.com/michaelbromley/ngx-pagination/blob/master/src/pagination-controls.directive.ts (ngx-pagination library)
2. https://github.com/ssuperczynski/ngx-easy-table/blob/master/projects/ngx-easy-table/src/lib/components/pagination/pagination.html (ngx-pagination exportas template implemented here)

exportAs is used for directives, see: http://plnkr.co/edit/IlLtBY7Ic9yKiRIpjukf?p=preview

@Directive({
  selector: "div",
  exportAs: "myDiv"
})
class MyDiv {

  constructor(private element: ElementRef, private renderer: Renderer) {
  }

  toUpper() {
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", "uppercase");
  }

  toLower() {
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", "lowercase");
  }

  reset() {
    return this.renderer.setElementStyle(this.element.nativeElement, "text-transform", "");
  }
}

Angular selector

Selector property of @Component decorator support, element selector, attribute selector and class selector:

1. Element selector:
@Component({
 selector: 'app-servers'
})


Usage: <app-servers></app-servers>

2. Attribute selector:
@Component({
 selector: '[app-servers]'
})


Usage: <div app-servers></div>

3. Class selector:
@Component({
 selector: '.app-servers'
})


Usage: <div class="app-servers"></div>

Note: Angular 2 does not support id and pseudo selectors