Angular Flashcards
Name the building blocks of Angular.
- Modules
- Components
- Templates
- Directives
- Data Binding
- Services
- Dependency Injection
- Routing
What’s transpiling in Angular?
Transpiling is the process of converting the typescript into javascript. Though typescript is used to write code in the Angular applications, the code is internally transpiled into javascript.
Which of the Angular life cycle component execution happens when a data-bound input value updates?
ngOnChanges is the life cycle hook that gets executed whenever a change happens to the data that was bound to an input.
What’s a lifecycle hook?
Directives and component instances have a lifecycle as Angular creates, updates, and destroys them. Developers can tap into key moments in that lifecycle by implementing one or more of the lifecycle hook interfaces in the Angular core library.
Differentiate between components and directives in Angular.
Components break up the application into smaller parts; Directives add behavior to an existing DOM element.
Give examples of different lifecycle hooks in angular
ngOnChanges: respond when angular resets data-bound input properties
ngOnInit: Initialize the directive/component after Angular first displays the data bound properties and sets the directive/component’s input properties
ngDoCheck: Detect and act upon changes that Angular can’t or won’t detect on its own. Called during every change detection run, immediately after ngOnChanges() and ngOnInit()
ngAfterContentInit(): Respond after Angular projects external content into the component’s view / the view that a directive is in. Called once, after the first ngDoCHeck()
ngAfterContentChecked(): Respond after angular checks the content project into the directive/component.
ngAfterViewInit: Respond after angular initializes the component’s views and child views/ the view that a directive is in. Called once after ngAfterContentChecked
ngAfterViewChecked: Respond after angular checks the component’s views and child views / the view that a directive is in. Called after the ngAfterViewInit and every subsequent ngAfterContentChecked
ngOnDestroy: Cleanup just before angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks.
What is the use of @Input?
When it comes to the communication of Angular components, which are in Parent-child relationship; we use @Input in child components when we are passing data from parent to child.
What is the use of @Output
@Output is used in child component to receive an event from to parent component.
What is ng-content directive?
The HTML elements like p or h1 have some content between the tags. For example, <p>this is a small paragraph</p> and <h1>this is a heading</h1>. Now, similar to this, what if we want to have some custom text or content between the angular tags like some related tax content This will not work the way it worked for HTML elements. Now, in such cases, the tag directive is used.
What does a router.navigate do?
When we want to route to a component we use router.navigate. Syntax: this.router.navigate([‘/componentNmae’]);
What is ViewEncapsulation?
ViewEncapsulation decides whether the styels 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
What are the services in angular and what command is used to create a service?
Services help us in not repeating the code. With the creation of services, we can use the same code for multiple components. To create a component, you use
ng g service NameOfService
What is dependency injection in Angular?
When a component is dependent on another component the dependency is injected/provided during runtime.
DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.
What are dependencies?
Dependencies in angular are services or objects that a class needs to perform its function.
What is routing in angular?
Routing helps a user navigate to different components using links.
