Answer»
Classes and fields can be decorated with Angular's dozens of decorators. These are some of the most commonly used decorators.
| Class Decorators | Details |
|---|
import { Directive, ... } from
'@angular/core';
| This imports the Directive from @angular/core |
@Component({...})
class MyComponent() {}
| Metadata about a component is declared as part of the class definition. |
@Directive({...})
class MyDirective() {}
| Declares the class as a directive and provides metadata about the directive |
@Pipe({...})
class MyPipe() {}
| Declares the class as a pipe and provides metadata about the pipe. |
@Injectable()
class MyService() {}
| This declares that class can be injected and provided. Without this decorator, the compiler does not generate enough metadata to allow the class to be created properly when it is injected somewhere. |
| CLASS FIELD DECORATORS | Details |
|---|
| import { Inp } from '@angular/core'; | Import Inp from @angular/core. | | @Input() myProperty; | You can declare input properties that you can bind to using property binding | | @Output() myEvent = new EventEmitter(); | An output property is declared that can fire subscribable events. | | @HostBinding('class.valid') isValid; | Host element property is binded to a component property | | @HostListener('click', ['$event']) onClick(e) {...} | Host element event is subscribed with a directive method | | @ContentChild(myPredicate) myChildComponent; | First result of the query in the component content is binded to a property of the class | | @ContentChildren(myPredicate) myChildComponents; | Results of the query in the component content is binded to a property of the class | | @ViewChild(myPredicate) myChildComponent; | First result of the query in the component view is binded to a property of the class | | @ViewChildren(myPredicate) myChildComponents; | Results of the query in the component view is binded to a property of the class |
DEPENDENCY INJECTION CONFIGURATION A dependency is a piece of information needed by a class to carry out its task. A service, on the other hand, is an object that a class creates and uses to carry out its tasks.A dependency injection container such as Angular's Dependency Injection(DI) framework is used to create the dependencies. Most of the time, a class depends on other classes, rather than on itself, to create the required dependencies. Dependencies are created by external sources, such as services and other classes. Following are dependency injection configuration as part of Angular’s DI framework:
| DEPENDENCY INJECTION CONFIGURATION | DETAILS |
|---|
| { provide: InterviewBitService, useClass: InterviewBitMockService } | InterviewBitService's provider is set or overridden to InterviewBitMockService class | | { provide: InterviewBitService, useFactory: InterviewBitFactory } | InterviewBitService's provider is set or overridden to InterviewBitFactory factory function | | { provide: InterviewBitValue, useValue: 56 } | InterviewBitValue's provider is set or overridden to the value 56 |
|
