Angular Question Bank

What is @NgModule? What are some of the attributes inside of the @NgModule decorator?

@NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime. declarations, imports, providers, and bootstrap are all attributes that can found inside the @NgModule decorator

What is a decorator?

A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. They are functions that are called at declaration. Decorators look a lot like annotations and are used to hold meta data in Angular 2+.

What is the lifecycle of a component?

A component lifecycle is defined by three stages. It begins when Angular instantiates a component and renders its view. Angular then tracks changes and updates the view and the instance as needed during change detection. The lifecycle ends when Angular destroys the component instance and removes its view from the DOM.

What is @Component? Attributes inside of the @Component decorator?

A decorator that is added to the top of the component's class definition inside its component.ts file. selector - CSS selector that identifies this component in a template. templateUrl - URL to an external file containing a template for the view. stylesUrls - List of URLs to stylesheets to be applied to this component's view.

What is *nglf and how does it work?

A structural directive that evaluates a boolean condition before rendering a template

What is ngFor and how does it work?

A structural directive that renders a template for each item in a collection

What is Angular CLI?

Angular CLI is a command line interface used to structure and build angular applications using Node.JS style modules. It also handles many common tasks for you, such as generating directives, services, and components.

Difference between Angular JS and Angular?

Angular JS is based of of JavaScript while Angular utilizes TypeScript, which is then transcribed to JavaScript.

What is Angular?

Angular is a TypeScript-based open-source front-end web application platform.

Explain types of directives

Component - a directive with a template. The most common directive. Attribute directive - changes the appearance or behavior of an element, component, or another directive Structural directive - change the DOM by adding and removing DOM elements

What is a component?

Components are the fundamental building blocks of our application. Angular documentation: A component controls a patch of the screen real estate that we could call a view, and declares reusable UI building blocks for our application.

What is data binding? What are the different data binding options?

Data binding automatically keeps your page up-to-date based on your application's state. property binding [] - retrieves a value event binding () - sets a value two-way binding [()]

Give few examples of predefined pipes

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe

What is a directive?

Directives are classes that add additional behavior to elements in your Angular applications.

What are filters in Angular?

Filters are used in AngularJS similarly to how pipes are used in Angular. Filters format the value of an expression for display to the user. They can be used in view templates, controllers or services.

What is a module?

In JavaScript/TypeScript, "modules" refers to small units of independent reusable code. When you use the key word "export" on a class it becomes a module for another file to import later.

What is the ngOninit() function?

Is called once to initialize the directive or component after Angular displays data-bound properties and sets the input properties for the first time.

Does the HttpClient object create synchronized requests?

It's standard behavior is to create asynchronous requests.

Technologies that you should include for your environment to create an Angular application?

Node.JS - A JavaScript runtime built on Chrome's V8 JavaScript engine. NPM (Node Package Manager) - It is the default package manager for Node.JS. Angular CLI - A command line interface used to structure and build angular applications.

What is a pip? What are some pipes that come with Angular?

Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe

What is a Promise?

Promises are objects that represent an unreceived response to an Http request They execute immediately after instantiation and only accept one value one time utilize .then()

What is routing? Why does Angular implement is own routing module?

Routing is navigating between different URLs/endpoints of a website. Angular implements its own routing module to take advantage of caching. It shows or hides portiions of the view that correspond to components instead of requesting a new page from a server.

Difference between Promises and Observable

They both represent responses to Http requests Observables don't execute their logic until they have been subscribed to Observables provide many values and can do so multiple times Observables differentiate between chaining and subscription subscribe() handles errors for observables, child promises handle errors for promises

Can we create custom pipes in Angular?

Yes

What are Angular services? What is an advantage of using services?

a broad category encompassing any value, function, or feature that an application needs typically a class with a narrow, well-defined purpose ts class with an @injectable decorator services allow different components to communicate, and they separate view-related functionality from other other kinds of functionality

What is a SPA?

a web application that fits on a single page in the browser all of our JS, HTML, and CSS is retrived once, onto a single web page

How to include a component on another component's HTML template page?

add a tag to the component's html page the text within the tag should match the selector found in the desired component's @Component decorator

how would you convert typescript class to angular's component

add the @Component decorator to the class

How would you add a new service to your project, without using Angular CLI?

create a .ts and .spec.ts for the service in the app folder or a subfolder within the app folder Within the .ts file add the @Injectable decorator with the providedIn attribute

How to create a new component, without Angular CLI?

create a folder within the app folder create at least an html and ts file within the new folder create a class within the ts file and add the @Component decorator import the class into app.module.ts

different ways of doing data binding in angular

interpolation, property, attribute, class, style - {{expression}} [target]="expression" bind-target="expression" one-way from data source to view event - (target)="statement" on-target="statement" one-way from view to data source two-way - [(target)]="expression" bindon-target="expression" two-way from data source to view and from view to data source

(Folder structure) What is node_modules?

library/dependencies that our angular project is going to use

(Folder structure) What is e2e?

ng e2e project-name builds and serves an angular app then runs end-to-end testing end-to-end testing is a form of testing that tests an application's workflow from beginning to end

How to add new component inside of Angular, using Angular CLI?

ng generate component component-name

Explain how you will create a custom pipe

ng generate pipe pipe-name You could also add the @Pipe decorator with the name attribute to a class

How would you add a new service to your project using Angular CLI?

ng generate service service-name

How to create a new Angular project using Angular CLI?

ng new project-name

What are the lifecycle hooks for a component?

ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy

What is a Dependency injection?

part of the Angular framework that is used to provide components with services or other things they need

How forms are handled in angular, explain both types of forms

reactive forms provide direct, explicit access to the underlying forms object model more easily scalable, reusable, and testable good choice if forms are a key part of the application or if the application already uses reactive patterns data flow is synchronous template-driven forms rely on directives in the template to create and manipulate the underlying object model useful for simple forms, straightforward don't scale well data flow is asynchronous

What are the different kind of directives provided by Angular?

structural directives - add or remove elements from the DOM attribute directives - modify the attributes of existing elements

How do you perform HTTP requests in Angular?

the HttpClient service class in @angular/common/http

Where is the app folder located? What files does it contain (if created by Angular CLI)

the app folder is located within the src folder it contains app.component.css, .html, .ts, .spec.ts, and app.module.ts files

(Folder structure) What is src?

where we will work most, contains the "single" html file with our view

explain angular services and how can you inject them

you can inject a service by declaring an instance in the constructor of a class that will use the service