1000 Angular Facts Q-No (81-90)
#Facts:81 How to create a Promise?
var promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('I promise to return this after 1 second!');
}, 1000);
});
promise.then(function(value) {
console.log(value);
});
When it executes successfully, we need to call the resolve() function that
takes the value as argument that needs to be returned, if any, or nothing.
If anything goes wrong, you need to call the reject() method.
#Facts:82 What is RxJS?
Ans: It is Reactive Extensions for JavaScript and it is a popular library that
is used to work with the asynchronous data streams.
RxJS helps developers to represent multiple asynchronous stream of data
and it can subscribe to the event streams by using Observer.
We can import library like this : import { interval } from 'rxjs';
#Facts:83 How to perform pipe chaining ?
Ans: We can chain pipes together as per our needs.
Let's take a date pipe example which data pipe(along with parameter) and uppercase pipes as below
import { Component } from '@angular/core';
@Component({
selector: 'app-main',
template: `<p>Joining date: {{ joiningData | date:'fullDate' | uppercase}} </p>`
})
export class MainComponent {
joiningData = new Date(1988, 6, 12);
}
#Facts:84 What is Pure pipe ?
A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.
For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
Angular executes a pure pipe only when it detects a pure change to the input value.
A pure change is a change to a primitive input value ( String , Number )
#Facts:85 What is Impure pipe ?
An impure pipe is called for every change detection cycle no matter whether the value or parameters changes.
i.e, we can say that an impure pipe is called on every keystroke or mouse-move.
By default every pipes in angular are pure, We can make a pipe impure by setting its pure flag to false.
@Pipe({
name: 'myDemoImpure',
pure: false
})
#Facts:86 What is Reactive forms ?
“Reactive forms provide a model-driven approach for handling form inputs whose values change over time.”
>With Reactive forms we don’t have to depend on template for creating our forms.
>We use API’s provided by angular which is called the Reactive API.
>We can use these APIs by importing a module called ReactiveModule to create the forms.
By using Reactive Forms all the declaration and structuring of the forms are to be perform in the code itself (.ts file).
Finally we can use this model in template (HTML).
#Facts:87 How to implement Reactive Forms ?
Ans: There are three steps through which we can implement Reactive Form :
1) Import Reactive forms module:
First of all, we need to import ReactiveFormsModule instead of FormsModule in our desired module class.
import { ReactiveFormsModule } from ‘@angular/forms’;
2)In component class define the form(i.e formGroup).
3)Link this form class to your HTML form.
#Facts:88 How to define the form (formGroup) in a component class ?
Ans: FormGroup: A FormGroup aggregates the values of each child FormControl into one object with each control name as the key.
FormControl: input fields in our form will be mapped with the formControl.
The formControl is like input box,dropdown-list, radio buttons, select box etc.
This form control will contain the value and validations of form field.
We will create formGroup and then inside this formGroup we will create different formControl’s
objects as per our need.In this way our formGroup will contain a group (collection) of form controls.
And in this way our form is ready to be use in our template.
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null),
password: new FormGroup({
user_password: new FormControl(null),
user_confirmPassword: new FormControl(null),
}),
});
}
#Facts:89 How to Connect this form to your template ?
Now, our Form is ready to be bind with our template like below:
<form [formGroup]=”loginForm” (ngSubmit)=”onSubmit()”></form>
formGroup: Binds the Form to the FormGroup we created in component i.e. loginForm.
ngSubmit: It will triggered when we submit the form.
formControlName: all the form fields must have formControlName, and it should be exactly the same as given in .ts file.
<input type=”text” placeholder=”Name” formControlName=”user_name”>
Example:
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<!-- Username -->
<label for="username">UserName: <span class="lblError">*</span></label>
<div class="controls">
<input type="text" id="username" placeholder="Name"
class="form-control" formControlName="user_name">
</div>
</div>
</form>
Finally onSubmit() method in our component class will submit the form.
onSubmit() {
console.log(this.loginForm);
console.log(this.loginForm.get(‘user_name’).value);
}
#Facts:90 What is zone in angular?
A Zone is an execution context that persists across async tasks.
Angular relies on zone.js to run Angular's change detection processes when native JavaScript operations raise events.
We can think of it as thread-local storage for JavaScript VMs.
Know more about Zone here - https://angular.io/guide/zone
Some Useful Resources :
No comments:
Post a Comment
In case of any query , please let me know, Thanks