Angular Flashcards
What is Angular?
Angular is a TypeScript-based open-source web application framework, developed and maintained by Google. It offers an easy and powerful way of building front end web-based applications.
Angular integrates a range of features like declarative templates, dependency injection, end-to-end tooling, etc. that facilitates web application development.
Define the ng-content Directive?
The ng-content is used when we want to insert the content dynamically inside the component that helps to increase component reusability. Using ng-content we can pass content inside the component selector and when angular parses that content that appears at the place of ng-content.
What are Lifecycle hooks in Angular?
ngOnChanges( ): This method is called whenever one or more input properties of the component changes. The hook receives a SimpleChanges object containing the previous and current values of the property.
ngOnInit( ): This hook gets called once, after the ngOnChanges hook. It initializes the component and sets the input properties of the component.
ngDoCheck( ): It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular.
We can implement our change detection algorithm in this hook.
ngAfterContentInit( ): It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component.
ngAfterContentChecked( ): It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked.
ngAfterViewInit( ): It responds after a component’s view, or a child component’s view is initialized.
ngAfterViewChecked( ): It gets called after ngAfterViewInit, and it responds after the component’s view, or the child component’s view is checked.
ngOnDestroy( ): It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.
Explain Dependency Injection?
Dependency injection is a design pattern where you reduce implicit dependencies by working with abstractions rather than concretions. In Angular dependency injection is baked in. You define a service in the app_module.ts and then any component can use it after declaring the service as a constructor parameter.
Describe the MVVM architecture.
The architecture allows the children to have reference through observables and not directly to their parents.
Model: It represents the data and the business logic of an application, or we may say it contains the structure of an entity. It consists of the business logic - local and remote data source, model classes, repository.
View: View is a visual layer of the application, and so consists of the UI Code(in Angular- HTML template of a component.). It sends the user action to the ViewModel but does not get the response back directly. It has to subscribe to the observables which ViewModel exposes to it to get the response.
ViewModel: It is an abstract layer of the application and acts as a bridge between the View and Model (business logic). It does not have any clue which View has to use it as it does not have a direct reference to the View. View and ViewModel are connected with data-binding so, any change in the View the ViewModel takes note and changes the data inside the Model. It interacts with the Model and exposes the observable that can be observed by the View.
Demonstrate navigating between different routes in an Angular application
import from “@angular/router”;
…
this.router.navigate([‘search’]);
Could you explain services in Angular?
Services are Singleton objects that get instantiated only once during the lifetime of the application. Service allow you to organize business logic, domain data, and functions and can be injected into any component.
What is string interpolation in Angular?
String interpolation can be used in the view templates with double curly braces {{ }}. This will substitute for value of a javascript expression.
