Skip to main content

Posts

Showing posts with the label @Component vs @Directive

What Is a Template Reference variable?

Template Reference variable -  A template reference variable is a way of capturing a reference to a specific element, component , directive , and pipe so that it can be used someplace in the same  template HTML . You should declare a reference variable using the  hash symbol (#) . The Angular components and directives only match selectors for classes that are declared in the Angular module. Template Reference Variable Syntax  – You can use a template reference variable by two ways. 1.       Using hash symbol (#) 2.       Using reference symbol (ref-) The following examples of specifying a template reference variable using Input Text Box  – I have declared a reference variable “cellnumber” using the  hash symbol (#)  and  reference symbol (ref-) . < input   type = "text"   ref-cellnumber >  //cellnumber will be a template reference variable. And ...

Angular Directives decorators

What Are Angular Directives? Angular Directive is a TypeScript class which is declared as a @directive decorator . The directives allow you to attach behavior to DOM elements and the @directive decorator provide you an additional metadata that determines how directives should be processed, instantiated, and used at run-time. What Are decorators? The Decorators are functions that modify JavaScript classes and it also used for attaching metadata to classes. Directive decorator and metadata Properties - @ Directive ({     selector? : string     inputs ?: string []     outputs ?: string []     host ?: {...}     providers ?: Provider []     exportAs ?: string     queries ?: {...} }) Selector – It is a CSS selector that tells Angular to create an instance of this component wherever it finds the corresponding tag in template HTML. For example, it ...