131. what is an rxjs subject in Angular
An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast.
A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners.
``` typescript
import { Subject } from 'rxjs';
const subject = new Subject<number>();
subject.subscribe({
next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({
next: (v) => console.log(`observerB: ${v}`)
});
subject.next(1);
subject.next(2);
```
132. What is Bazel tool?
Bazel is a powerful build tool developed and massively used by Google and it can keep track of the dependencies between different packages and build targets. In Angular8, you can build your CLI application with Bazel.
**Note:** The Angular framework itself is built with Bazel.
133. What are the advantages of Bazel tool?
Below are the list of key advantages of Bazel tool,
1. It creates the possibility of building your back-ends and front-ends with the same tool
2. The incremental build and tests
3. It creates the possibility to have remote builds and cache on a build farm.
134. How do you use Bazel with Angular CLI?
The @angular/bazel package provides a builder that allows Angular CLI to use Bazel as the build tool.
1. **Use in an existing applciation:** Add @angular/bazel using CLI
```javascript
ng add @angular/bazel
```
2. **Use in a new application:** Install the package and create the application with collection option
```javascript
npm install -g @angular/bazel
ng new --collection=@angular/bazel
```
When you use ng build and ng serve commands, Bazel is used behind the scenes and outputs the results in dist/bin folder.
135. How do you run Bazel directly?
Sometimes you may want to bypass the Angular CLI builder and run Bazel directly using Bazel CLI. You can install it globally using @bazel/bazel npm package. i.e, Bazel CLI is available under @bazel/bazel package. After you can apply the below common commands,
```javascrippt
bazel build [targets] // Compile the default output artifacts of the given targets.
bazel test [targets] // Run the tests with *_test targets found in the pattern.
bazel run [target]: Compile the program represented by target and then run it.
```
136. What is platform in Angular?
A platform is the context in which an Angular application runs. The most common platform for Angular applications is a web browser, but it can also be an operating system for a mobile device, or a web server. The runtime-platform is provided by the @angular/platform-* packages and these packages allow applications that make use of `@angular/core` and `@angular/common` to execute in different environments.
i.e, Angular can be used as platform-independent framework in different environments, For example,
1. While running in the browser, it uses `platform-browser` package.
2. When SSR(server-side rendering ) is used, it uses `platform-server` package for providing web server implementation.
137. What happens if I import the same module twice?
If multiple modules imports the same module then angular evaluates it only once (When it encounters the module first time). It follows this condition even the module appears at any level in a hierarchy of imported NgModules.
138. How do you select an element with in a component template?
You can use `@ViewChild` directive to access elements in the view directly. Let's take input element with a reference,
```html
<input #uname>
```
and define view child directive and access it in ngAfterViewInit lifecycle hook
```javascript
@ViewChild('uname') input;
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
```
139. How do you detect route change in Angular?
In Angular7, you can subscribe to router to detect the changes. The subscription for router events would be as below,
```javascript
this.router.events.subscribe((event: Event) => {})
```
Let's take a simple component to detect router changes
```javascript
import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor(private router: Router) {
this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationStart) {
// Show loading indicator and perform an action
}
if (event instanceof NavigationEnd) {
// Hide loading indicator and perform an action
}
if (event instanceof NavigationError) {
// Hide loading indicator and perform an action
console.log(event.error); // It logs an error for debugging
}
});
}
}
```
140. How do you pass headers for HTTP client?
You can directly pass object map for http client or create HttpHeaders class to supply the headers.
```javascript
constructor(private _http: HttpClient) {}
this._http.get('someUrl',{
headers: {'header1':'value1','header2':'value2'}
});
(or)
let headers = new HttpHeaders().set('header1', headerValue1); // create header object
headers = headers.append('header2', headerValue2); // add a new header, creating a new object
headers = headers.append('header3', headerValue3); // add another header
let params = new HttpParams().set('param1', value1); // create params object
params = params.append('param2', value2); // add a new param, creating a new object
params = params.append('param3', value3); // add another param
return this._http.get<any[]>('someUrl', { headers: headers, params: params })
```
Comments
Post a Comment
please do not enter any spam link in the comment box