The Angular 9 RC is out, what an exciting time to be Angular developer. Ivy is here, Ivy is now the default rendering engine in Angular. Follow along and check latest Angular X Interview Questions and Answers with latest Ivy updates for 2020.
You could also find all the answers here 👉 https://www.fullstack.cafe/Angular.
Answer:
Angular’s route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. They make this decision by looking for a true or false return value from a class which implements the given guard interface.
🔗 Source: medium.com
Answer:
An Angular module is set of Angular basic building blocks like component, directives, services etc. An app can have more than one module.
A module can be created using @NgModule decorator.
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }🔗 Source: stackoverflow.com
Answer:
A pipe takes in data as input and transforms it to a desired output. You can chain pipes together in potentially useful combinations. You can write your own custom pipes. Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe.
Consider:
<p>The hero's birthday is {{ birthday | date }}</p>In this page, you'll use pipes to transform a component's birthday property into a human-friendly date.
🔗 Source: angular.io
Q4: What are the differences between AngularJS (angular 1.x) and Angular (Angular 2.x and beyond)? ⭐⭐
Answer:
Angular and AngularJS is basically a different framework with the same name.
Angular is more ready for the current state of web standards and the future state of the web (ES6\7, immutiablity, components, shadow DOM, service workers, mobile compatibilty, modules, typescript and so on and so on... )
Angular killed many main features in AngularJS like - controllers, $scope, directives (replaced with @component annotations), the module definition, and much more, even simple things like ng-repeat has not left the same as it was.
Also:
- They added an angular
cli. - Your angular code is written in ES6 Typescript and it compiles at runtime to Javascript in the browser.
- You bind to your HTML similarly like how you would if in an Angular 1 directive. So variable like $scope and $rootScope have been deprecated.
🔗 Source: stackoverflow.com
Answer:
Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.
@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
name: string = 'World';
}🔗 Source: angular.io
Answer:
The absolute minimal configuration for a @Component in Angular is a template. Both template properties are set to optional because you have to define either template or templateUrl.
When you don't define them, you will get an exception like this:
No template specified for component 'ComponentName'A selector property is not required, as you can also use your components in a route.
🔗 Source: stackoverflow.com
Answer:
Components control views (html). They also communicate with other components and services to bring functionality to your app.
Modules consist of one or more components. They do not control any html. Your modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and which component gets bootstrapped. Modules allow you to manage your components to bring modularity to your app.
🔗 Source: stackoverflow.com
Answer:
Angular services are singleton objects which get instantiated only once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application.
The separation of concerns is the main reason why Angular services came into existence. An Angular service is a stateless object and provides some very useful functions.
🔗 Source: dzone.com
Answer:
Just bind to the hidden property
🔗 Source: stackoverflow.com
Answer:
The correct syntax is the following:
<div [innerHTML]="theHtmlString"></div>Working in 5.2.6
🔗 Source: medium.com
Answer:
You can get a handle to the DOM element via ElementRef by injecting it into your component's constructor:
constructor(myElement: ElementRef) { ... }🔗 Source: medium.com
Answer:
Just bind to the hidden property:
[hidden]="!myVar"🔗 Source: medium.com
Q13: What is the difference between *ngIf vs [hidden]? ⭐⭐
Answer:
*ngIf effectively removes its content from the DOM while [hidden] modifies the display property and only instructs the browser to not show the content but the DOM still contains it.
🔗 Source: medium.com
Answer:
- Directives add behaviour to an existing DOM element or an existing component instance.
- A component, rather than adding/modifying behaviour, actually creates its own view (hierarchy of DOM elements) with attached behaviour.
Write a component when you want to create a reusable set of DOM elements of UI with custom behaviour. Write a directive when you want to write reusable behaviour to supplement existing DOM elements.
🔗 Source: medium.com
Questions Details:
@HostBinding('[class.valid]') isValid;Answer:
@HostBinding lets you set properties on the element or component that hosts the directive.
The code applies the css class valid to whatever is using this directive conditionally based on the value of isValid.
🔗 Source: alligator.io
Answer:
The Angular router ships with a feature called guards. These provide us with ways to control the flow of our application. We can stop a user from visitng certain routes, stop a user from leaving routes, and more. The overall process for protecting Angular routes:
- Create a guard service:
ng g guard auth - Create
canActivate()orcanActivateChild()methods - Use the guard when defining routes
// import the newly created AuthGuard
const routes: Routes = [
{
path: 'account',
canActivate: [AuthGuard]
}
];Some other available guards:
CanActivate: Check if a user has accessCanActivateChild: Check if a user has access to any of the child routesCanDeactivate: Can a user leave a page? For example, they haven't finished editing a postResolve: Grab data before the route is instantiatedCanLoad: Check to see if we can load the routes assets
🔗 Source: scotch.io
Answer:
Just to name a few:
- Improvements in AOT,
- allowing the "else" clause in ngIf,
- support for TypeScript 2.1
- breaking out the animations package
🔗 Source: github.com/WebPredict
Answer:
The Angular CLI downloads and install everything you need to test an Angular application with the Jasmine test framework.
The project you create with the CLI is immediately ready to test. Just run this one CLI command:
ng test🔗 Source: angular.io
Answer:
-
Structural directives are used to alter the DOM layout by removing and adding DOM elements. It is far better in changing the structure of the view. Examples of Structural directives are NgFor and Nglf.
-
Attribute Directives These are being used as characteristics of elements. For example, a directive such as built-in NgStyle in the template Syntax guide is an attribute directive.
🔗 Source: onlineinterviewquestions.com
Answer:
The routing application should add element to the index.html as the first child in the tag inorder to indicate how to compose navigation URLs. If app folder is the application root then you can set the href value as below
<base href="/">🔗 Source: github.com/sudheerj
Answer:
Observer is an interface for a consumer of push-based notifications delivered by an Observable. It has below structure,
interface Observer<T> {
closed?: boolean;
next: (value: T) => void;
error: (err: any) => void;
complete: () => void;
}A handler that implements the Observer interface for receiving observable notifications will be passed as a parameter for observable as below,
myObservable.subscribe(myObserver);Note: If you don't supply a handler for a notification type, the observer ignores notifications of that type.
🔗 Source: github.com/sudheerj
Answer:
An Observable is a unique Object similar to a Promise that can help manage async code. Observables are not part of the JavaScript language so we need to rely on a popular Observable library called RxJS. The observables are created using new keyword. Let see the simple example of observable,
import { Observable } from 'rxjs';
const observable = new Observable(observer => {
setTimeout(() => {
observer.next('Hello from a Observable!');
}, 2000);
});`🔗 Source: github.com/sudheerj
Answer:
Observables are declarative which provide support for passing messages between publishers and subscribers in your application. They are mainly used for event handling, asynchronous programming, and handling multiple values. In this case, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.
🔗 Source: github.com/sudheerj
Answer:
Every application has at least one Angular module, the root module that you bootstrap to launch the application is called as bootstrapping module. It is commonly known as AppModule. The default structure of AppModule generated by AngularCLI would be as follows,
/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
/* the AppModule class with the @NgModule decorator */
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }🔗 Source: github.com/sudheerj
Answer:
Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding. It is represented by double curly braces({{}}). The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property. Let's take an example,
<h3>
{{title}}
<img src="{{url}}" style="height:30px">
</h3>In the example above, Angular evaluates the title and url properties and fills in the blanks, first displaying a bold application title and then a URL.
🔗 Source: github.com/sudheerj
See 👉 Answer
See 👉 Answer
See 👉 Answer
Q29: Can you explain the difference between Promise and Observable in Angular? In what scenario can we use each case? ⭐⭐⭐
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
Questions Details:
Angular Universal is a server-side rendering module for Angular applications in various scenarios. This is a community driven project and available under@angular/platform-server package. Recently Angular Universal is integrated with Angular CLI.
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
Q72: When should I store the "Subscription" instances and invoke unsubscribe() during the NgOnDestroy life cycle and when can I simply ignore them? ⭐⭐⭐⭐
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
Q77: Are there any pros/cons (especially performance-wise) in using local storage to replace cookie functionality? ⭐⭐⭐⭐
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
Questions Details:
- Query parameters: http://example.com/apples?order=random&color=blue
- Matrix parameters: http://example.com/apples;order=random;color=blue
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer
See 👉 Answer