Angular

What do you mean by Webpack/config file in Angular application? What is the purpose and use of Webpack file?

Pranam BhatJun 2, 20211,578

When you open **DevTools**, in the **Network** tab, you will see "**.chunk.js**" file. What does it mean? What is the purpose of "**.chunk.js**" file?

Pranam BhatMay 26, 20213,175

- Angular compilation steps. - How an Angular application served internally?

Pranam BhatMay 17, 20212,135

Reduce bundle/app size in an angular project.

Pranam BhatMay 17, 20212,372

Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application. The description of each lifecycle method is as below, i. ngOnChanges: When the value of a data bound property changes, then this method is called. ii. ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens. iii. ngDoCheck: This is for the detection and to act on changes that Angular can't or won't detect on its own. iv. ngAfterContentInit: This is called in response after Angular projects external content into the component's view. v. ngAfterContentChecked: This is called in response after Angular checks the content projected into the component. vi. ngAfterViewInit: This is called in response after Angular initializes the component's views and child views. vii. ngAfterViewChecked: This is called in response after Angular checks the component's views and child views. viii. ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.

What is the difference between switchMap, concatMap and mergeMap operators in RxJS?

Harshal LimayeJan 3, 20212,423

In case based on one condition we have to display an element/ html section , then ngIf is suitable. But if we have multiple elements / html sections for different value of an expression/ property , then we should use ngSwitch. Ex:- **ngIf** ```html <div *ngIf="showSection()"> show this section if showSection() method returns true </div> ``` **ngSwitch** ```html <div [ngSwitch]="property.value"> <div *ngSwitchCase="'1'"> show this section if property value is 1 </div> <div *ngSwitchCase="'2'"> show this section if property value is 2 </div> <div *ngSwitchCase="'3'"> show this section if property value is 3 </div> <div *ngSwitchDefault> show this section if property value is neither 1 nor 2 nor 3 </div> </div> ```

Kiran MohantySep 23, 20206,755

What are dynamic components in Angular 9? E.g. Suppose you have alert or Sucess message box which are not created yet but on some action you want to create those.

This is a very common interview question that asks in angular so if you want to can explain this with example then the interviewer .You can go through my article there u can get to know about it with examples. Below is the link of it. https://www.c-sharpcorner.com/article/what-is-the-difference-between-observable-and-promise-with-example-in-angular-8/

Siddharth GajbhiyeAug 4, 20201,897

For example. If I execute `ng add @angular/material`. What changes are applied in an Angular project?

Cristopher CoronadoAug 1, 20201,106

I have a **AngularJs** webpage with content like this: ** {{message}}** And I set the model for 'message' such that: **$scope.message = "Hello!" ** Then on the screen, the contents of the div will display as : **Hello ! ** But if I view the source in Chrome or Firefox, the source still looks like this : **<div>{{message}}</div>** and all links output should be : **href="/{{siteLanguage}}/UserProfile">{{'LayaoutPageMYCOUNTLabelle2' | translate}}** how would like the final pages in HTML with no angular?

Kenza FarehFeb 3, 2020761

**What is ngOnInit?** When you create a new component, you will realize that a method named ngOnInit ( ) appears below the constructor: import {Component,OnInit} from '@angular/core'; @Component ({ selector :'app-home', templateUrl:'./home.component.html', styleUrls:['./home.component.css'] }) export class HomeComponent implements OnInit{ constructor(){} ngOnInit{ } } Every component has a lifecycle. The ngOnInit() method is called immediately after Angular finishes setting up the component. What we can do inside the ngOnInit() method is that some operations like fetching data, or something we want to see immediately on page load. It is not recommended to do these kinds of operations inside the constructor, so we have ngOnInit instead. **In Angular, the constructor should only be responsible for dependency injection.** we need ngOnInit() method for: 1. To perform complex initializations shortly after construction. 2. To set up the component after Angular sets the input properties. **An ngOnInit() is a good place for a component to fetch its initial data.**

Tushar BharambeJan 7, 202014,049

We can think of Angular Components like LEGO pieces. We create a component once but can use them multiple times in different parts of our website. An Angular app is a tree structure consisting of all those components that we create, like how we make a Lego Structure from little Lego pieces. So this is basically what an Angular Component is, but that’s not all. In this article, you will find answers to the following questions: - What are the tasks of a component? - What is inside of a component? - How does a component work? - What is ngOnInit? **Tasks of a Component** The main tasks of a component are: 1. Displaying a specific page/section and its data with the support of Interpolation, Directives, and Pipes 2. Binding data between the view and the model. **What is inside of a component?** A component contains (mostly) 3 parts: 1. Template File— HTML View 2. TypeScript File — Model 3. Style File — CSS The Folder (app) is our Component Folder, which contains HTML, CSS and TS files. Spec.ts is for testing, and you can ignore module.ts for now. So each component has its own HTML structure, style (CSS) and functionality (TS). **But how does a component work actually?** We should carefully name our Folders when creating an Angular App, otherwise, we get lost inside a bigger project. **How does a component work?** Inside the app.component.ts: import {Component} from '@angular/core'; @Component ({ selector :'app-root', templateUrl:'./app.component.html', styleUrls:['./app.component.css'] }) export class AppComponent{ } We have here an ordinary TypeScript class. But in order to use it as a component: First of all, we import Component from the @ angular/core library, so we can create an Angular Component The **@ Component** decorator marks the **TS class** as a Component and allows us to add the following metadata The **selector** is for calling the component inside other HTML files of the project, as an HTML tag: <ap

Tushar BharambeJan 7, 20206,128

The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes. Let's take a time observable which continuously updates the view for every 2 seconds with the current time. @Component({ selector: 'async-observable-pipe', template: `<div><code>observable|async</code>: Time: {{ time | async }}</div>` }) export class AsyncObservablePipeComponent { time = new Observable(observer => setInterval(() => observer.next(new Date().toString()), 2000) ); }

Tushar BharambeJan 7, 20204,498