1000 Angular Facts Q-No (71-80)
Fact:71. How to share data using @ViewChild () ?
Ans: Using @ViewChild () decorator we can share the data from child to parent component.
We can inject one component into another component using decorator.
step-1 Open the parent component and import:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";
Step-2: export class ParentComponent implements AfterViewInit {
@ViewChild(ChildComponent) child;
constructor() { }
employeeList =[];
ngAfterViewInit() {
this.employeeList = this.child.employeeList;
}
}
Fact:72. What is the significance of Route order in angular routing ?
Ans: The order of routes is important because the Router uses a first-match wins strategy when matching routes,
> so more specific routes should be placed above less specific routes
> List routes with a static path first, followed by an empty path route, which matches the default route.
> The wildcard route comes in the last because it matches each and every URL and the Router selects
it in case no other routes match first.
Fact:73. How to extract information from a route ?
Step-1 Import ActivatedRoute and ParamMap to your component
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
Step-2 Inject an instance of ActivatedRoute to constructor:
constructor(
private route: ActivatedRoute,
) {}
Step-3 write below code to the ngOnInit() method to access the ActivatedRoute and track the id parameter:
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.id = params['id'];
});
}
Fact:74. How to display a 404 page ?
Ans: To display a 404 page,you need to set up a wildcard route with the component property set to the component
for your 404 page:
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'admin', component: AdminComponent },
{ path: '**', component: SiteComponent },
{ path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page
];
Last route with the path of ** is a wildcard route.
The router selects this route if the requested URL doesn't match any of the paths
earlier in the list and sends the user to the PageNotFoundComponent.
Fact:75. Angular Universal ?
Ans: It is a tool for implementing server-side rendering of an Angular application.
# When integrating with an app, Universal generates and serves static pages on the server in response
to requests from browsers.
# The initial static page serves as a fast-loading placeholder while the full application is
being prepared for normal execution in the browser.
Fact:76. What is cross-site scripting (XSS) ?
Ans: Cross-site scripting (XSS) enables attackers to inject malicious code into the web pages.
that can steal user data (e.g login data) or perform actions to impersonate the user. This is one of the most common attacks on the web.
# To block XSS attacks, you must prevent malicious code from entering the DOM.
if attackers can trick you into inserting a <script> tag in the DOM, they can run arbitrary code on your website.
# The attack will not limited to <script> tags only infact many elements and properties in the DOM allow code execution, for example, <img onerror="..."> and <a href="javascript:...">
Fact:77. What is Angular’s cross-site scripting security model ?
Ans: By default Angular treats all values as untrusted to systematically block XSS bugs.
When a value is inserted into the DOM from a template, property, attribute, style, class binding
or interpolation, Angular sanitizes and escapes untrusted values.
Sanitization means inspection of an untrusted value and turning it into a value that's safe for the DOM.
Fact:78. How do you perform error handling in observables?
Ans: We can handle errors by specifying an error callback on the observer instead of relying on try/catch block.
We can define error callback as below code:
myFirstObservable.subscribe({
next(num) { console.log('First number: ' + number)},
error(err) { console.log('An errror occured: ' + err)}
});
Fact:79. What is Promise ?
Ans: A promise is an API abstraction that allows us to handle asynchronous operations synchronously.
Promise Execute immediately on its creation. It Provide only one value. Uses only .then() clause.
Some Problems using Promises:
# When our application gets bigger, Promises become hard to manage.
# A Promise is defined where data create, not where it is being used.
# What if we want to retry a failed call?
Some Useful Resources :
