Questions III Flashcards
What is lazy loading?
Lazy loading is one of the most useful concepts of Angular Routing. It helps us to download the web pages in chunks instead of downloading everything in a big bundle. It is used for lazy loading by asynchronously loading the feature module for routing whenever required using the property loadChildren.
How to use polyfills in Angular application?
The Angular CLI provides support for polyfills officially.
A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
When you create a new project with the ng new command, a src/polyfills.ts configuration file is created as part of your project folder. This file includes the mandatory and many of the optional polyfills as JavaScript import statements. Let’s categorize the polyfills,
Mandatory polyfills: These are installed automatically when you create your project with ng new command and the respective import statements enabled in ‘src/polyfills.ts’ file.
Optional polyfills: You need to install its npm package and then create import statement in ‘src/polyfills.ts’ file. For example, first you need to install below npm package for adding web animations (optional) polyfill. bash npm install –save web-animations-js and create import statement in polyfill file. javascript import ‘web-animations-js’;
What is AOT compiler?
The AOT compiler is part of a build process that produces a small, fast, ready-to-run application package, typically for production. It converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.
What are reactive forms?
Reactive forms is a model-driven approach for creating forms in a reactive style (form inputs changes over time). These are built around observable streams where form inputs and values are provided as streams of input values.
Let’s follow the below steps to create reactive forms,
Register the reactive forms module which declares reactive-form directives in your app
Create a new FormControl instance and save it in the component
userName = new FormControl(‘’);
Register the FormControl in the template:
<input type=”text” [formControl]=”userName”>
What are dynamic forms?
Dynamic forms is a pattern in which we build a form dynamically based on metadata that describes a business object model. You can create them based on reactive form API.
What are template driven forms?
Template driven forms are model-driven forms where you write the logic, validations, controls etc, in the template part of the code using directives.
They are suitable for simple scenarios and uses two-way binding with [(ngModel)] syntax. For example, you can create register form easily by following the below simple steps,
Bind the form from template to the component using ngModel syntax
<input type=”text” class=”form-control” id=”name”
required
[(ngModel)]=”model.name” name=”name”>
Attach NgForm directive to the tag in order to create FormControl instances and register them:
<form #registerForm=”ngForm”>
What are the different ways to group form controls?
Reactive forms provide two ways of grouping multiple related controls.
FormGroup: It defines a form with a fixed set of controls those can be managed together in an one object. It has same properties and methods similar to a FormControl instance. This FormGroup can be nested to create complex forms as below.
FormArray: It defines a dynamic form in an array format, where you can add and remove controls at run time. This is useful for dynamic forms when you don’t know how many controls will be present within the group.
What are the types of validator functions?
In reactive forms, the validators can be either synchronous or asynchronous functions,
Sync validators: These are the synchronous functions which take a control instance and immediately return either a set of validation errors or null. Also, these functions passed as second argument while instantiating the form control. The main use cases are simple checks like whether a field is empty, whether it exceeds a maximum length etc.
Async validators: These are the asynchronous functions which take a control instance and return a Promise or Observable that later emits a set of validation errors or null. Also, these functions passed as second argument while instantiating the form control. The main
Can you give an example of built-in validators?
In reactive forms, you can use built-in validator like required and minlength on your input form controls. For example, the registration form can have these validators on name input field
What is host property in css?
The :host pseudo-class selector is used to target styles in the element that hosts the component. Since the host element is in a parent component’s template, you can’t reach the host element from inside the component by other means. For example, you can create a border for parent element as below,
What is Component Test Harnesses?
A component harness is a testing API around an Angular directive or component to make tests simpler by hiding implementation details from test suites. This can be shared between unit tests, integration tests, and end-to-end tests. The idea for component harnesses comes from the PageObject pattern commonly used for integration testing.
What is content projection?
Content projection is a pattern in which you insert, or project, the content you want to use inside another component.
What is ng-content and its purpose?
The ng-content is used to insert the content dynamically inside the component that helps to increase component reusability.
What is standalone component?
A standalone component is a type of component which is not part of any Angular module. It provides a simplified way to build Angular applications.
What is hydration?
Hydration is the process that restores the server side rendered application on the client.
This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes.
To enable hydration, we have to enable server side rendering or Angular Universal. Once enabled, we can add the following piece of code in the root component.
