Angular

Define the common @Component metadata configuration options.

@Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ } selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains <app-hero-list></app-hero-list>, then Angular inserts an instance of the HeroListComponent view between those tags. templateUrl: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component's host view. providers: An array of providers for services that the component requires. In the example, this tells Angular how to provide the HeroService instance that the component's constructor uses to get the list of heroes to display.

Explain directives

A directive is a class with a @Directive() decorator. A component is technically a directive. However, components are so distinctive and central to Angular applications that Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features. In addition to components, there are two other kinds of directives: structural and attribute. Angular defines a number of directives of both kinds, and you can define your own using the @Directive() decorator.

Explain Angular modules

A module is a place where we can group components, directives, services, and pipes. Module decides whether the components, directives, etc can be used by other modules, by exporting or hiding these elements. Every module is defined with a @NgModule decorator. By default, modules are of two types: Root Module Feature Module Every application can have only one root module whereas, it can have one or more feature modules. In the application that we created before, one can see that the root module is defined inside app.module.ts and this is how it looks: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TestComponent } from './test/text.component'; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

What is an Angular template?

A template is a form of HTML that tells Angular how to render the component. You define a component's view with its companion template. Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's host view. The component can also define a view hierarchy, which contains embedded views, hosted by other components.

What is the Angular template syntax?

A template looks like regular HTML, except that it also contains Angular template syntax, which alters the HTML based on your app's logic and the state of app and DOM data. Your template can use data binding to coordinate the app and DOM data, pipes to transform data before it is displayed, and directives to apply app logic to what gets displayed.

What are Angular observables?

An interface to handle a variety of common asynchronous operations. You can define custom events that send observable output data from a child to a parent component. The HTTP module uses observables to handle AJAX requests and responses. The Router and Forms modules use observables to listen for and respond to user-input events.

How often does Angular process data bindings?

Angular processes all data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components.

How do you transmit data between components?

Angular provides an EventEmitter class that is used when publishing values from a component through the @Output() decorator. When you call emit(), it passes the emitted value to the next() method of any subscribed observer.

Question: State some advantages of Angular over other frameworks.

Answer: Out of box Features: Several built-in features like routing, state management, rxjs library, and HTTP services are straight out of the box services provided by Angular. So, one does not need to look for the above-stated features separately. Declarative UI: Angular uses HTML to render the UI of an application as it is a declarative language and is much easier to use than JavaScript. Long-term Google Support: Google plans to stick with Angular and further scale up its ecosystem as it has offered its long term support to Angular. Question: What is the difference between Angular andQuestion: What is the difference between Angular and AngularJS. AngularJS.

Question: What are Lifecycle hooks in Angular? Explain some life cycles hooks

Answer: Angular components enter its lifecycle from the time it is created to the time it is destroyed. Angular hooks provide ways to tap into these phases and trigger changes at specific phases in a lifecycle. ngOnChanges( ): This method is called whenever one or more input properties of the component changes. The hook receives a SimpleChanges object containing the previous and current values of the property. ngOnInit( ): This hook gets called once, after the ngOnChanges hook. It initializes the component and sets the input properties of the component. ngDoCheck( ): It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular. We can implement our change detection algorithm in this hook. etc...

Question: What is Angular?

Answer: Angular is a TypeScript-based open-source web application framework. Angular integrates a range of features like declarative templates, dependency injection, end-to-end tooling, etc. that facilitates web application development.

Question: Define the ng-content Directive?

Answer: Conventional HTML elements have some content between the tags. For instance: <p>Put your paragraph here</p> Now consider the following example of having custom text between angular tags: <app-work>This won't work like HTML until you use ng-content Directive</app-work> However, doing so won't work the way it worked for HTML elements. In order to make it work just like the HTML example mentioned above, we need to use the ng-content Directive. Moreover, it is helpful in building reusable components.

Question: Explain Dependency Injection?

Answer: Dependency injection is an application design pattern that is implemented by Angular and forms the core concepts of Angular. Let us understand in a detailed manner. Dependencies in Angular are services which have a functionality. Various components and directives in an application can need these functionalities of the service. Angular provides a smooth mechanism by which these dependencies are injected into components and directives. NOTE: This answer isn't very good, really... would not satisfy an interviewer. Needs more details.

Question: Describe the MVVM architecture.

Answer: MVVM architecture removes tight coupling between each component. The MVVM architecture comprises of three parts: Model View ViewModel The architecture allows the children to have reference through observables and not directly to their parents. Model: It represents the data and the business logic of an application, or we may say it contains the structure of an entity. It consists of the business logic - local and remote data source, model classes, repository. View: View is a visual layer of the application, and so consists of the UI Code(in Angular- HTML template of a component.). It sends the user action to the ViewModel but does not get the response back directly. It has to subscribe to the observables which ViewModel exposes to it to get the response. ViewModel: It is an abstract layer of the application and acts as a bridge between the View and Model(business logic). It does not have any clue which View has to use it as it does not have a direct reference to the View. View and ViewModel are connected with data-binding so, any change in the View the ViewModel takes note and changes the data inside the Model. It interacts with the Model and exposes the observable that can be observed by the View.

Question: Demonstrate navigating between different routes in an Angular application.

Answer: TODO...

Question: Please explain the various features of Angular.

Answer: There are several features of Angular that make it an ideal front end JavaScript framework. Most important of them are described as follows: - Accessibility Applications Angular allows creating accessible applications using ARIA-enabled components, built-in a11y test infrastructure, and developer guides. - Angular CLI Angular provides support for command-line interface tools. These tools can be used for adding components, testing, instant deploying, etc. - Animation Support Angular's intuitive API allows the creation of high-performance, complex animation timelines with very little code. - Cross-Platform App Development Angular can be used for building an efficient and powerful desktop, native, and progressive web apps. Angular provides support for building native mobile applications using Cordova, Ionic, or NativeScript. Angular allows creating high performance, offline, and zero-step installation progressive web apps using modern web platform capabilities. The popular JS framework can also be used for building desktop apps for Linux, macOS, and Windows. - Code Generation Angular is able to convert templates into highly-optimized code for modern JavaScript virtual machines. - Code Splitting With the new Component Router, Angular apps load quickly. The Component Router offers automatic code-splitting so that only the code required to render the view that is requested by a user is loaded. - Synergy with Popular Code Editors and IDEs Angular offers code completion, instant errors, etc. with popular source code editors and IDEs. - Templates Allows creating UI views with a simple and powerful template syntax. - Testing Angular lets you carry out frequent unit tests using Karma. The Protractor allows running faster scenario tests in a stable way.

Question: Why was Angular introduced as a client-side framework?

Answer: Traditionally, VanillaJS and jQuery were used by developers to develop dynamic websites. As the websites became more complex with added features and functionality, it was hard for the developers to maintain the code. Moreover, there was no provision of data handling facilities across the views by jQuery. So, Angular was built to address these issues, thus, making it easier for the developers by dividing code into smaller bits of information that are known as Components in Angular. Client-side frameworks permit the development of advanced web applications like SPAs which, if developed by VanillaJS, is a slower process.

Question: Could we make an angular application to render on the server-side?

Answer: Yes, we can, with Angular Universal, a technology provided by Angular capable of rendering applications on the server-side. The benefits of using Angular Universal are: Better User Experience: Allows users to see the view of the application instantly. Better SEO: Universal ensures that the content is available on every search engine leading to better SEO. Loads Faster: Render pages are available to the browsers sooner, so the server-side application loads faster.

Explain attribute directives

Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name. The ngModel directive, which implements two-way data binding, is an example of an attribute directive. ngModel modifies the behavior of an existing element (typically <input>) by setting its display value property and responding to change events. <input [(ngModel)]="hero.name"> Angular has more pre-defined directives that either alter the layout structure (for example, ngSwitch) or modify aspects of DOM elements and components (for example, ngStyle and ngClass).

What does ng serve do?

Builds and serves your app, rebuilding on file changes.

What does ng build do?

Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.

2. How does an Angular application work?

Every Angular app consists of a file named angular.json. This file will contain all the configurations of the app. While building the app, the builder looks at this file to find the entry point of the application. Inside the build section, the main property of the options object defines the entry point of the application which in this case is main.ts. The main.ts file creates a browser environment for the application to run, and, along with this, it also calls a function called bootstrapModule, which bootstraps the application. These two steps are performed in the following order inside the main.ts file:

In Angular, what is JIT (Just in Time) compilation? What is AOT (Ahead-Of-Time) Compilation? What are its advantages?

Every Angular application needs to be compiled before running inside the browser. In JIT (Just in Time) compilation, the application compiles inside the browser during runtime. In AOT (Ahead of Time) compilation, the application compiles during build time. The advantages of using AOT compilation are: Since the application compiles before running inside the browser, the browser loads the executable code and renders the application immediately, which leads to faster rendering.

How do you create a component?

For creating a component, inside the command terminal, navigate to the directory of the application created, and run the following command: ng generate component test One can see the generated component inside src/app/test folder. The component will be defined inside test.component.ts and this is how it looks: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', : ['./test.component.css'] }) export lass TestComponent implements OnInit { constructor() {} ngOnInit() { } } As we can see in the above image, our component is defined with @Component decorator.

What does the @Component decorator do in Angular?

Identifies the class immediately below it as a component class and specifies its meta data. The @Component metadata will contain or point to the template.

Explain Angular Components

In Angular, components are the basic building blocks, which control a part of the UI for any application. A component is defined using the @Component decorator. Every component consists of three parts: the template which loads the view for the component, a stylesheet which defines the look and feel for the component, and a class that contains the business logic for the component.

More ways to share data between Angular components

Parent to child using @Input decorator

How do you create a feature module?

Run the command: ng g m test-module The module is created inside the src/app/test-module/test-module.module.ts file. As one can see, CommonModule is imported since this is a feature module and there is the @NgModule annotation.

Explain Angular Services

Services are objects which get instantiated only once during the lifetime of an application. The main objective of a service is to share data, functions with different components of an Angular application. A service is defined using a @Injectable decorator. A function defined inside a service can be invoked from any component or directive.

Explain string interpolation and property binding in Angular.

String interpolation and property binding are parts of data-binding in Angular. Data-binding can be done in two ways, one-way binding and two-way binding.In Angular, data from the component can be inserted inside the HTML template. In one-way binding, any changes in the component will directly reflect inside the HTML template but, vice-versa is not possible. Whereas, it is possible in two-way binding. String interpolation and property binding allow only one-way data binding.

Explain structural directives

Structural directives alter layout by adding, removing, and replacing elements in the DOM. The example template uses two built-in structural directives to add application logic to how the view is rendered. <li *ngFor="let hero of heroes"></li> <app-hero-detail *ngIf="selectedHero"></app-hero-detail> *ngFor is an iterative; it tells Angular to stamp out one <li> per hero in the heroes list. *ngIf is a conditional; it includes the HeroDetail component only if a selected hero exists.

What is the DOM?

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

Explain the three types of one-way Angular data binding

Three types of data binding in use: <li>{{hero.name}}</li> <app-hero-detail [hero]="selectedHero"></app-hero-detail> <li (click)="selectHero(hero)"></li> The {{hero.name}} interpolation displays the component's hero.name property value within the <li> element. The [hero] property binding passes the value of selectedHero from the parent HeroListComponent to the hero property of the child HeroDetailComponent. The (click) event binding calls the component's selectHero method when the user clicks a hero's name.

Angular has a single two-way data binding type. Explain it.

Two-way data binding (used mainly in template-driven forms) combines property and event binding in a single notation. Here's an example from the HeroDetailComponent template that uses two-way data binding with the ngModel directive. <input [(ngModel)]="hero.name"> In two-way binding, a data property value flows to the input box from the component as with property binding. The user's changes also flow back to the component, resetting the property to the latest value, as with event binding.

What are Angular pipes?

used to format data before displaying it.