A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the @NgModule metadata.
Components can have child-parent relations with other components. An angular app should be visualized as a tree of components that are composed to make the whole large application.
Each component of ours typically will have these three files —
- *.component.ts — component class file
- *.component.html — component template file
- *.component.(s)css — component styles file
These files are connected by the @Component decorator in *.component.ts file. @Component decorator gets a configuration object as an argument.
What is Component Decorator?
Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.
@Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss']
})In addition to these options for configuring a directive, you can control a component’s runtime behaviour by implementing life-cycle hooks.
What are Life-Cycle Hooks?
Directive and component instances have a lifecycle as Angular creates, updates, and destroys them. Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur. Developers can take advantage of key moments in the life cycle by implementing one or more life cycle connection interfaces in the angular core library.
There are 8 different hooks available in angular;
- ngOnChanges(): Called whenever an input value changes
- ngOnInit(): Called once after input values are set when a component is initialized.
- ngDoCheck(): Called during all change detection runs
- ngAfterContentInit(): Called only once after first ngDoCheck()
- ngAfterContentChecked(): Called after every ngDoCheck()
- ngAfterViewInit(): Called only once after the view is initialized
- ngAfterViewChecked(): Called after all the content is initialized and checked.
- ngOnDestroy(): Called only once just before the component is removed from the DOM.
What is ViewEncapsulation?
ViewEncapsulation decides whether the styles defined in a component can affect the entire application or not. There are three ways to do this in Angular:
- Emulated: styles from other HTML spread to the component.
- Native: styles from other HTML do not spread to the component.
- None: styles defined in a component are visible to all components.
Directive vs Component?
Directive is a piece of code that can be attached to another directive.
Component is a piece of view with code attached to it. It’s a special type of directive.