GetPost - ESSIEN.NET

Peter Agyekum What is Angular?

Angular is a TypeScript-based open-source web application framework, developed and maintained by Google. It offers an easy and powerful way of building front end web-based applications.

Peter Agyekum Define the ng-content Directive?

Conventional HTML elements have some content between the tags. For instance: Put your paragraph here Now consider the following example of having custom text between angular tags: This won’t work like HTML until you use ng-content Directive 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. Know more about the ng-content directive.

Peter Agyekum Please explain the various features of Angular.

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.

Peter Agyekum Could you explain services in Angular?

Singleton objects in Angular that get instantiated only once during the lifetime of an application are called services. An Angular service contains methods that maintain the data throughout the life of an application. The primary intent of an Angular service is to organize as well as share business logic, models, or data and functions with various components of an Angular application. The functions offered by an Angular service can be invoked from any Angular component, such as a controller or directive.

Peter Agyekum Discuss the advantages of using Angular?

Following are the various advantages of using Angular: Ability to add a custom directive Exceptional community support Facilitates client and server communication Features strong features, such as Animation and Event Handlers Follows the MVC pattern architecture Offers support for static template and Angular template Support for two-way data-binding Supports dependency injection, RESTful services, and validations

Peter Agyekum Discuss the disadvantages of using Angular?

Complex SPAs can be inconvenient and laggy to use due to their size Dynamic applications do not always perform well Learning Angular requires a decent effort and time

Peter Agyekum In Angular,what can you use to pass data from parent component to child component?

Answer is @Input. Explanation: @Input() and @Output() allow Angular to share data between the parent and child. @Input() is the doorway that allows data to flow in while @Output() is the doorway out of the component, allowing the child component to send data out.

Peter Agyekum What is the default component change detection strategy?

Default

Peter Agyekum Identity the type of databinding for the below code snippet: <form-field [label]="Employee Id'" [value]="employeeId"></form-field>

Property binding

Peter Agyekum Which of the following is not a life cycle hook?

.ngOnChanges
. ngViewStart : Correct Answer
. ngOnInit
. None of the above

Peter Agyekum Identity the databinding for the below code snippet: <input type="email" [(ngModel)]="user.email>

Two-way binding

Peter Agyekum What is String Interpolation and how is used?

Used double Curly to bind data to template and should return a value {{value}}

Peter Agyekum What is property binding?

Bind data to property of the the DOM element. Example : img [Src]= "myvalue"> Square property is used. Component [Property]= "value" DOM

Peter Agyekum What is Even handler and how is used?

It's an interaction with an application in the form of a action. Exampleis click event. button class= "btn btn-primary" (Click) ="addToCart" (item)" /button. componet "event handler" = DOM

Peter Agyekum What is two way Binding and how is used?

It's combination of property and event binding and synchronization of data from view to the component and vice versa. Example: component [ngModel)] = DOM

Peter Agyekum Using Services, when there is no parent child relation

We can use Angular service

Peter Agyekum Using routes, when there is no parent -child relation, what happens?

Angular router helps to switch from one view to the next as user perform task

Peter Agyekum What is CSS3 Animation?

It provides the illusion of motion, transition from initial sate to final state. Example color, grow or shrink.

Peter Agyekum What are the Animation Functions state them?

KeyFrames()-changes styles within certain intervals. KeyFrame-Specify the animation steps such as interval. Group().-specify inner animation. Query()-Find the inner html elements. Sequence()-specify steps sequentially one by one. Staggers-specify starting time for the animation multiple elements

Peter Agyekum What are the animation Metadata?

Duration, Delay, Easing

Peter Agyekum What are directives?

Component:features Uses template Structural: Add and remove element in the DOM, example: div *ngIf= "condition">/div

Peter Agyekum What are Attribute directive?

Set ngStyle element in the DOM. "element" [ngStyle]= "{font-size: ..}.../style

Peter Agyekum How to create component using CLI

ng g c componentName

Peter Agyekum How to create Service using CLI?

ng g s ServiceName

Peter Agyekum What do you write installing Bootstrap, J Query, popper etc..?

npm install bootstrap - -save

Peter Agyekum What to write at CLI creating new Application?

ng new ApplicationName. After creation use cd to be at the application platform. To view at the browser, use ng serve.

Peter Agyekum What is interpolation in Angular?

binding variable data to a view

Peter Agyekum What are types of directives?

Structural, Components, Attributes, Custom

Peter Agyekum What is ngModel used for?

For two way binding and is attribute directives

Peter Agyekum What is ngClass?

It controls the appearance of elements and removing CSS classes. example string, object or an array

Peter Agyekum What is ngStyle?

Allows to set DOM elements style properties as colon-separated value pair

Peter Agyekum What is HostListerner?

HostListerner allows to subscribe to any event of a particular DOM. Use HostListener to mouseEnter event

Peter Agyekum What are pipes?

Pipes transform output in the template. It's denoted by 'I'. Can be used to convert Upper and Lower string case. Also can be used for chaining with symbol 'I'. Generate pipe using ng generate pipe

Peter Agyekum What is a pure PIPE?

Its executed whenever there is a change is detected in primitive input value

Peter Agyekum What is data binding?

It's communication between typescript code/business logic and the template (UI)

Peter Agyekum What is Angular Service

Service is needed when you want to reuse data logic across multiple components., store and centralize code. Various include: directives, components, services, data Access, logging. business Logic

Peter Agyekum When use service/?

Share data, implement Application logic or external interactions such as a database.

Peter Agyekum What is a dependency injection?

Its refer to an object supplying external resources rather than creating them itself.

Peter Agyekum How do you setup HttpClient?

You need to import httpClientModule in app.module.ts

Peter Agyekum What is Angular Router?

It allows you to switch from one view to another or one component to another.

Peter Agyekum What is base href?

Every Angular application should have base href defined to /, in the index.html page, the top-level hierarchy. Example: base href= "/"

Peter Agyekum What is RouterLink?

bind a clickable HTML element to the route which triggers navigation

Peter Agyekum What is RouterOutlet?

The Router directive marks where the router display a view

Peter Agyekum To register the routes

Use forRoot available in RouterModule

Peter Agyekum What are the Route Properties?

path, component, redirecTo, pathMatch, children, outlet, canActivate or Disactivate

Peter Agyekum How to configure WildCard?

use double arteries ' ** '

Peter Agyekum What are the Route Guards

Allows access to certain route.

Peter Agyekum What are the Location strategyry

HashLocationStrategy: has # sign added to the URL PathLocationStrategy: specify base URL in the application example history

Peter Agyekum What does HTTP services get, put,post,delete function return?

Object of type any

Peter Agyekum What are Forms?

Used to handle user input ex. log in. It is used to submit form to the server using Angular HTTP service.. Has two approach: 1. Template driven: - use component and directives, use unstructured format and field, mutable and heavy used of ngModel. 2. Reactive:- Create Model object in typescript, functions using directives to HTML and also form control, form group, form array, controlValueAccessor. The predictability is synchronous and also immutable.

Peter Agyekum How do you bind ngForm object

form #f= "ngForm" /form Display vale to the form: pre{{f.value | json}} /pre

Peter Agyekum List function of updating forms

registercontrol(), addControl(), removeControl(), reset(), setValue() - update entire form, patchValue() - update part of the form, contains()

Peter Agyekum What to write when creating component or service using Angular CLI?

COMPONENT: ng g c componentName. SERVICE : ng g s serviceName

Peter Agyekum What are forms and how do you handle it?

Forms are used to handle user input. example: Login, submit, order. It can be used to submit data to the server using Http service

Peter Agyekum What are the types of form and form interaction?

Two Type: Template-Driven and Reactive. Interactions include: Validation, User input or Submit

Peter Agyekum Explain Template-Driven Form?

Emphasize on: 1. Component Template using directive. 2. A template defines structure such as; forms, field formatting, and validation rules. 3. Use of ngModel directives

Peter Agyekum Explain Reactive forms?

1. Create a model object using a Typescript code and link the Html template to the model using directives. 2. Construct the form model object explicitly using the FormControl, FormGroup and FormArray classes

Peter Agyekum What are the various form directives?

FormControl(validations), FormGrou(Collection), FormArray(track value), ControlValueAccessor( bridge Angular instances and DOM)

Peter Agyekum State benefits of Reactive?

1. REACTIVE: create d by component, Explicit, structured, synchronous, functions, immutable. 2. TEMPLATE-DRIVEN: Created by directives, unstructured, Asynchronous, directives, mutable

Peter Agyekum What are the form Model?

Form Model helps to understand how the control instances are set-up and managed

Peter Agyekum What is ngForm, NgModel?

A. ngForm: It represents the entire form and attached to every form Implicitly create a class that represents the model. Example:2 form #f= "ngForm" ,/form. 2. Displays the value of the form pre{{json}} /pre B.ngModel: used for TWO-WAY binding. creates form control representing field data. Example: form. input type text name= "Username" ngModel /form

Peter Agyekum Explain ngModelGroup give example?

Represent part of the form and allow field together. Example: div ngModelGroup="password">..... /div Access the value from nested

Peter Agyekum How does Reactive Form works?

Links control to the element using ControlValueAccessor

Peter Agyekum What is form builder?

Include group, Control and Array Example:FormGroup - [form ] = "myFormModel"> or use of bracket({}) or property biding:input type=" text" [formControl] = "name" /

Peter Agyekum Explain FormControl directive and formGroupName directive?

1. FormControl: Property binding; standalone instance eg. (' '). 2. FromGroup: bind Dom, Links. 3. FormControlName:"from" "To" property name to model nexted group date range

Peter Agyekum What is form Validation?

Ensure data entered is in the right format or within the requirements.

Peter Agyekum What are types of Form Validation

Client-side and Server-side

Peter Agyekum What is Pristine and DIrty, touched in form control?

1. The user has not changed the value in the UI. Ex. ngIf= 'userForm.valid && user.pristine 2. User has changed the value 3. Touch; user hover but not changed

Peter Agyekum What is Authentication and Authorization?

1. Authentication:- It's verifying the identity of the user and what is to required to do within the application 2. Authorization is giving access to resources

Peter Agyekum Explain type of authentication Authentication ?

Cookie-based authentication: Track user session both client and server. It's stateful. Token-based authentication: involved sending a token with each request instead of a cookie to verify the authenticity of the request. It's a stateless and server does not keep a record

Peter Agyekum What is cookie-based authentication?

User login credentials to create sessions stored in the database. User with ID is placed in the user browser. The ID is verified if it's correct or valid, the request is granted. When the user logout, the session is destroyed, both client and server.

Peter Agyekum What is Token-based Authentication

server if the user credential is correct to return a signed token and gets a copy to the server. The token is stored in the client-side in local storage or session storage or cookie..When the user logout the token is destroyed in the client-side but not server-side

Peter Agyekum What are the advantages of Token-based Authentication

Stateless, scalable, cross domains, data storage, has JWI storage Mobility ready

Peter Agyekum What is JWT?

Jason Web Token (JWI) is transmitting information to both client and server-side using public and private keys- HMAC SHA256 or RSA, payload (Claim) header, signature.

Peter Agyekum What are Access and Refresh Tokens

Access Token: protected resources. Refresh token: Allow the client to request a new access key

Peter Agyekum Steps in Authentication?

JWT, Client & Storage, Backend, Auth Service, Error Interceptor, Auth. Guard, JWT interceptor, User service

Peter Agyekum What are session storage and Local storage?

1. SessionStorage: store data for the session only. 2. Local storage: store data without an expiration date

Peter Agyekum What is JWT Interceptor

Its the incoming request from the application(HTTP request) U.P, JWT. Does not modify but clone the request and adds to JWT

Peter Agyekum What does AuthGuard?

Implements, CanActivate such as True or False

Peter Agyekum Mention some security threads in the website?

Signature stripping, Cross-site scripting, cross-site request forgery. Can use user session credentials, or image. Cross-site scripting- Store malicious code,

Peter Agyekum Which of the following attack can be avoided implementing security policies

SQL injection

Peter Agyekum Which of the following class should be implementd to intercept http request

HttpIntercepter

Peter Agyekum What is the meaning of HTTP reponse code 401

Unauthorized error

Peter Agyekum Can"t bind fromGroup since its not property

Import(ReactiveFormGroup)

Peter Agyekum Which type place form handling within component class property provide interaction through observable?

Reactive Forms

Peter Agyekum How to send JWT back to the client?

Cookie,body,plaintext,

Peter Agyekum What is software testing and type of testing?

It is to evaluate the functionality of the software application. Unit testing, Functionality, testing, and integration testing.

Peter Agyekum What is Unit testing?

.Testing a small piece of independent code. No concern about how wrapped into your application. .Prevent bugs takes longer. A popular tool for Angular is Jasmine.

Peter Agyekum Functionality testing?

It's a combination of many testing. Takes longer, use tools like database, UI, security, major changes

Peter Agyekum What is integrated testing?

Ensure that the system App is working fine. Slower, the environment is DB, servers, and production environment.

Peter Agyekum What are type of testing in Angular?

Uni testing, End-to-end testing-action such as button click. Karma is used for javaScript code

Peter Agyekum what are the Jasmine test suite?

Spec test the combination of many spec test is called Suite.

Peter Agyekum What is Clone?

Create a copy of an existing remote repository inside the local repository

Peter Agyekum What is Git workflow?

Commit command- commit all files into staging. Push workflow moves all changes from local to the remote repository Fetch collect and copy the repository to local. Pull gets change from remote copy to local

Peter Agyekum What is Nginx?

Is a web software allows reduction of page load

Peter Agyekum What is docker?

Used to design-build, deploy, and run the application

Peter Agyekum What is Angular 4 and how it differs from Angular 1.x?

Angular 4 is a Javascript framework built around the concept of components, and more precisely, with the Web Components standard in mind. It was rewritten from scratch by the Angular team using Typescript (although we can use it with ES5, ES6, or Dart as well). Angular 4 is a big change for us compared to 1.x. Because it is a completely different framework than 1.x, and is not backward-compatible. Angular 4 is written entirely in Typescript and meets the ECMAScript 6 specification. The main differences are: Angular 4 is entirely component based. Controllers and $scope are no longer used. They have been replaced by components and directives. Angular 4 uses TypeScript. TypeScript will not be used in the browser directly. So the program code is compiled to JavaScript. This can be achieved with “Traceur”. The digest cycle from Angular 1.x has been replaced by another internal mechanism known as “Change Detection”. This feature, along with other improvements and tweaks, yields a considerable increase in performance. Unlike Angular 1.x where we can get most of the functionalities in angular.js file, Angular 4 follows module pattern. We need to import the functions ourself and export them when we need anywhere else. There are no more factory, service, provider in Angular 4. We need to use class for declaring a service.

Peter Agyekum What is component decorators in Angular 4?

The main objectives of decorators is to add some metadata to the class that will tell Angular 4 how to process a class. Or in another words, Decorators are functions that modify JavaScript classes. Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work. If we consider Component in Angular 4, we will have following options to configure. selector: — define the name of the HTML element in which our component will live. template or templateUrl: — It can be inline string or link an external html file. It allows us to tie logic from our component directly to a view. styles: — the styles array for our specific component. We can also link external CSS by styleUrls. directives: — another component directives we want to use inside our components. providers: — This is the place we are passing the services that we need insider our components. Immediately after this decorator or right to it, we need to export a class where our variables and functions reside that our component uses.

Peter Agyekum Explain the difference between `Promise` and `Observable` in Angular?

Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time. Let's see the difference between these two. Emit multiple values over a period of time. Emit a single value at a time.

Peter Agyekum The main difference between constructor and ngOnInit is that ngOnInit

ngOnInit is lifecycle hook and runs after constructor. Component interpolated template and input initial values aren't available in constructor, but they are available in ngOnInit .

Peter Agyekum In Angular, you can pass data from parent component to child component using...

@Input

Peter Agyekum You can create local HTML reference of HTML tag using variable which starts with character

#

Peter Agyekum A directive which modifies DOM hierarchy is called

Structural directive

Peter Agyekum Select correct form control class name which is set to true via [(ngModel)] whenever value is modified

ng-dirty

Peter Agyekum If you provide a custom service in two components’ “providers” section of @Component decorator, how many instances of service shall get created?

2

Peter Agyekum Custom pipe can modify actual value of variable apart from different presention in HTML.

False

Peter Agyekum In Angular routing, below tag is used to render matched component via active route.

route outlet

Peter Agyekum We need to call below method of RouterModule for providing all routes in AppModule

RouterModule.forRoot

Peter Agyekum Async Pipe subscribes to observer and update expression whenever there is data sent from observer

True

Peter Agyekum Below command is used to run Static Code analysis of Angular application

ng lint

Peter Agyekum Router service needs to be explicitly provided in angular module to use it in other component via DI

False

Peter Agyekum We can chain multiple pipe in a single expression along with “async” pipe

true

Peter Agyekum Below component represent “target/host” DOM element inside Directive’s constructor

ElementRef

Peter Agyekum To build application in production mode, use below command

--prod

Peter Agyekum Directive can listen to host/target events using below decoarator

@HostListener

Peter Agyekum Using below wild card we can define page not found route

**

Peter Agyekum Below service can be used to extract route parameters inside component

ActivatedRoute

Peter Agyekum HTTP service’s get/put/post/delete function returns

Observable

Peter Agyekum Observer sends data to multiple clients via below method

next()

Peter Agyekum By default, component’s change detection strategy is set to

Default

Peter Agyekum One component can be declared inside more than one NgModule

false

Peter Agyekum To use HttpClient component you need to import below module

HttpClientModule

Peter Agyekum Below pseudo class represent void => * animation state

:enter

Peter Agyekum HTTP service is called event if observer doesn’t have “subscribe” method

false

Peter Agyekum A component can have child route defined using below property

children

Peter Agyekum OnPush is faster in performance than Default change detection strategy

true

Peter Agyekum In AOT compilation mode, browser gets angular compiler along with website content

false

Peter Agyekum What will be the output of below program?

function f(input: boolean) { let a = 100; if (input) { let b = a + 1; return b; } return b; }

Peter Agyekum What will be the output of below program? function f(input: boolean) { let a = 100; if (input) { let b = a + 1; return b; } return b; }

Compilation error for b

Peter Agyekum What are the lifecycle hooks for components?

ngOnChanges: Called every time a data-bound input property changes. ... ngOnInit: Called once upon initialization of the component. ngDoCheck: Use this hook instead of ngOnChanges for changes that Angular doesn't detect.

Peter Agyekum What is @ViewChild in angular?

ViewChild is a component, directive, or element as a part of a template. If we want to access a child component, directive, DOM element inside the parent component, we use the decorator @ViewChild() in Angular. ... Since the child component can be located inside the parent component, it can accessed as @ViewChild.

Peter Agyekum What is ngOnInit ()?

ngOnInit is a life cycle hook called by Angular to indicate that the Angular is done creating the component. In order to use OnInit we have to import it in the component class like this: import {Component, OnInit} from '@angular/core'; Actually implementing OnInit in every component is not mandatory.

Peter Agyekum Why is ngOnInit called twice?

The ngOnInit() hooks only once after all directives are instantiated. If you have subscription inside ngOnInit() and it's not unsubscribed then it will run again if the subscribed data changes. ... It console twice because it loads once and data changes and it loads again.

Peter Agyekum What is Viewencapsulation in angular?

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies: ... All components with None encapsulation will have their styles duplicated in all components with Native encapsulation.

Peter Agyekum What is a DOM in angular?

DOM stands for Document Object Model. AngularJS's directives are used to bind application data to the attributes of HTML DOM elements

Peter Agyekum What is difference between constructor and ngOnInit?

The main difference between constructor and ngOnInit is that ngOnInit is lifecycle hook and runs after constructor. Component interpolated template and input initial values aren't available in constructor, but they are available in ngOnInit . The practical difference is how ngOnInit affects how the code is structured

Peter Agyekum Is ngOnChanges called before ngOnInit?

ngOnChanges( ) — It is called before ngOnInit( ) and whenever one or more data-bound input properties change. It detects simple changes in the property values. ngOnInit( ) — It initializes the directive/component after Angular displays the data-bound properties and is called once after ngOnChanges( )

Peter Agyekum What are directives in angular?

Angular directives are used to extend the power of the HTML by giving it new syntax. Each directive has a name — either one from the Angular predefined like ng-repeat , or a custom one which can be called anything. And each directive determines where it can be used: in an element , attribute , class or comment .A

Peter Agyekum What is dependency injection angular?

Dependency injection (DI), is an important application design pattern. ... DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself. In Angular, the DI framework provides declared dependencies to a class when that class is instantiated.

Peter Agyekum What is pipe in angular?

Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. There are some built in pipes, but you can also build your own pipes. A pipe takes in a value or values and then returns a value.No

Peter Agyekum What is constructor in angular?

What is Constructor? A constructor is a special method that will be called whenever we create new objects. And generally used of initializing the class members. It is a feature of the class(typescript) itself, an object-oriented design concept not Angular

Peter Agyekum What is @component in angular?

Advertisements. Components are a logical piece of code for Angular JS application. A Component consists of the following − Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application.

Peter Agyekum What is @input in angular?

Use the @Input() decorator in a child component or directive to let Angular know that a property in that component can receive its value from its parent component. ... So an @Input() allows data to be input into the child component from the parent component.

Peter Agyekum What is the difference between ViewChild () and ContentChild ()?

It is used to access Child Component in the Parent Component. Any directive, component, and element which is part of component template is accessed as ViewChild. Whereas, any element or component which is projected inside is accessed as ContentChild.

Peter Agyekum What is nativeElement?

According to the official docs. Angular ElementRef is a wrapper around a native element inside of a View. It's simply a class that wraps native DOM elements in the browser and allows you to work with the DOM by providing the nativeElement object which exposes all the methods and properties of the native elements.

Peter Agyekum What is a decorator in angular?

Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified prior to its usage.

Peter Agyekum What comes first constructor or ngOnInit?

The ngOnInit is called after the constructor is executed. In constructor Angular initializes and resolves all class members so in ngOnInit you can initialize work and logic of the component.

Peter Agyekum What is the purpose of ngOnInit? The ngOnInit Function?

What is the purpose of ngOnInit? The ngOnInit Function

Peter Agyekum What is the difference between ngOnInit and ngAfterViewInit?

ngOnInit() is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated. ngAfterViewInit() is called after a component's view, and its children's views, are created

Peter Agyekum How do I call ngOnInit again?

Calling ngOnInit() from another function scope. Break your functionality into another function, use ngOnInit to call it and, afterwards, any request can be made from anywhere by calling the function in the following manner: this . You should not need to call ngOnInit again.

Peter Agyekum What is lazy loading in angular?

How Lazy Loading works? Lazy Loading generally, is a concept where we delay loading of an object until it is needed. In Angular, all the JavaScript components declared in the declarations array app. module. ts are bundled and loaded in one fell swoop when a user visits our site

Peter Agyekum What is AOT compilation in angular?

The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

Peter Agyekum What is _ngcontent?

_ngcontent-c# attributes are added when you use ViewEncapsulation.Emulated - which is default. Angular uses these attributes to target specific elements with the styles. The number c is sort of a unique identifier of the host component

Peter Agyekum What is Dom and its types?

The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." ... Core DOM - standard model for all document types.

Peter Agyekum Which Dom angular uses?

React and Vue are using Virtual DOM and Angular uses a direct DOM rendering system. It's the same thing that Angular did with version 1. x, but it is optimized and there is a surprise for you

Peter Agyekum What is 2 way data binding in angular?

Two-way data binding combines the input and output binding into a single notation using the ngModel directive. To create your own component that supports two-way binding, you must define an @Output property to match an @Input , but suffix it with the Change .

Peter Agyekum Does angular use dom?

Angular2 doesn't use virtual DOM at all. Angular2 has change detection that detects changes to the model and only updates the parts of the DOM that need to be changed according to the model changes. For more details see also Is Shadow DOM fast like Virtual DOM in React.

Peter Agyekum What is SimpleChanges in angular?

What is SimpleChanges in Angular? SimpleChanges is an Angular/Core feature that can be used to see the changes and a few more details of the declared property names in a component. And also it needs to be used in the Angular ngOnChange method to see the values changes and to do relevant things.

Peter Agyekum What does ng mean in angular?

In Angular. js the prefix ng stands for "Angular;" all of the built-in directives that ship with Angular use that prefix. Similarly, it is recommended that you do not use the ng prefix on your own directives in order to avoid possible name collisions in future versions of Angular

Peter Agyekum What is the difference between @component and @directive in angular?

Component is a directive which use shadow DOM to create encapsulate visual behavior called components. Components are typically used to create UI widgets. Directives is used to add behavior to an existing DOM element. Component is used to break up the application into smaller components.

Peter Agyekum What is attribute in angular?

The attribute directive changes the appearance or behavior of a DOM element. These directives look like regular HTML attributes in templates. The ngModel directive which is used for two-way is an example of an attribute directive. ... The Angular places only selected element tree into the DOM based on some condition.

Peter Agyekum What is NgModule in angular?

@NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime. It identifies the module's own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them.

Peter Agyekum What is InjectionToken?

InjectionToken helps to make the code modular without any hassle of figuring out where you have written your endpoints or variables

Peter Agyekum What is HttpClient in angular?

Most front-end applications need to communicate with a server over the HTTP protocol, in order to download or upload data and access other back-end services. Angular provides a simplified client HTTP API for Angular applications, the HttpClient service class in @angular/common/http

Peter Agyekum What is root injector in angular?

Angular injectors (generally) return singletons. That is, in the previous example, all components in the application will receive the same random number. ... Below the root injector is the root @Component . This particular component has no providers array and will use the root injector for all of its dependencies.

Peter Agyekum What is providedIn in angular?

providedIn: 'root' When you provide the service at the root level, Angular creates a single, shared instance of service and injects it into any class that asks for it.

Peter Agyekum What is a pipe in angular 6?

Pipes are used to format the data before displaying in the View. Pipe is used by using |. This symbol is called a Pipe Operator. Types of pre-defined or built-in pipes in Angular 6. Lowercase.

Peter Agyekum What is map and pipe in angular?

Note: pipe() is a function/method that is used to chain multiple RxJS operators while map() and filter() are operators that operate and transform the values of an Observable (sequence of values). They are similar to the map() and filter() methods of JavaScript

Peter Agyekum What is async pipe in angular?

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Peter Agyekum What are the building blocks of angular?

The main building blocks for Angular are modules, components, templates, metadata, data binding, directives, services, and dependency injection. We will be looking at it in a while. Angular does not have a concept of “scope” or controllers instead, it uses a hierarchy of components as its main architectural concept

Peter Agyekum What is .TS file in angular?

ts: This file is a unit testing file related to app component. This file is used along with other unit tests. It is run from Angular CLI by the command ng test. app. component.

Peter Agyekum What is the difference between @input and @output in angular?

Input is used to receive data in whereas Output is used to send data out. Output sends data out by exposing event producers, usually EventEmitter objects.

Peter Agyekum What is an observable in angular?

An exciting new feature used with Angular is the Observable . Observables open up a continuous channel of communication in which multiple values of data can be emitted over time. ... From this we get a pattern of dealing with data by using array-like operations to parse, modify and maintain data

Peter Agyekum What is HostListener in angular?

Decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs. ... A set of arguments to pass to the handler method when the event occurs.

Peter Agyekum What are providers in Angular?

Providers are to make services and values known to DI (dependency injection)

Peter Agyekum What does declarations performs in Angular?

Declarations are used to declare components, directives, pipes that belong to the current module. Everyone inside declarations knows each other.

Peter Agyekum Lifecycle hook of Component

ngOnChanges() Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values. Called before ngOnInit() and whenever one or more data-bound input properties change. ngOnInit() Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties. Called once, after the first ngOnChanges(). ngDoCheck() Detect and act upon changes that Angular can't or won't detect on its own. Called during every change detection run, immediately after ngOnChanges() and ngOnInit(). ngAfterContentInit() Respond after Angular projects external content into the component's view. Called once after the first ngDoCheck(). A component-only hook. ngAfterContentChecked() Respond after Angular checks the content projected into the component. Called after the ngAfterContentInit() and every subsequent ngDoCheck(). A component-only hook. ngAfterViewInit() Respond after Angular initializes the component's views and child views. Called once after the first ngAfterContentChecked(). A component-only hook. ngAfterViewChecked() Respond after Angular checks the component's views and child views. Called after the ngAfterViewInit and every subsequent ngAfterContentChecked(). A component-only hook. ngOnDestroy() Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks. Called just before Angular destroys the directive/component.

Peter Agyekum Difference Between Angular 1 and Angular 2

Angular 2 is five times faster than angular 1. In Angular 2 Bootstrap is platform-specific. For Mobile, it calls different bootstrap and for desktop different. Angular2 used typescript to write code it is easy to code for java/.net developer. No $scope in Angular 1, used this operator to access member variable. The same code renders the different views for mobile and desktop. Angular 2 is component-based. Injectors changed significantly. Child injectors are new things in Angular 2. There were a bunch of directives in Angular 1. Angular 2 has only Component, Decorator, and Template directive. JSON based Route config is easier to edit.

Peter Agyekum How many types of data binding available in Angular?

Event binding, Two-way data binding, Interpolation, Property binding, String Interpolation.

Peter Agyekum What is Event binding?

This data binding type is when information flows from the view to the component when an event is triggered. The view sends the data from an event like the click of a button to be used to update the component. It is the exact opposite of property binding, where the data goes from the component to the view.

Peter Agyekum What is Two-way data binding?

Two-way binding is a mechanism where data flows both ways from the component to the view and back. The component and view are always in sync, and changes made on either end are immediately updated both ways. Two-way binding is commonly used when dealing with forms where the user input is used to update the component’s state and vice versa.

Peter Agyekum What is Interpolation?

This data binding mechanism is a technique, text representing variables in components are placed in between double curly braces in the template. Angular finds the variable matching the text in the component and replaces the text with the value assigned to the variable. Numbers, strings, etc. can be used directly between the curly braces.

Peter Agyekum What is Property binding?

Property binding is a one-way mechanism that lets you set the property of a view element. It involves updating the value of a property in the component and binding it to an element in the view template. Property binding uses the [] syntax for data binding. An example is setting the disabled state of a button.

Peter Agyekum What is String Interpolation?

Interpolation, like we mentioned above, is a mechanism that allows the integration of defined string values into text within HTML tags and attribute assignments in the presentation layer (view). Interpolation makes use of the {{ }} double curly braces syntax to embed template expressions that will be converted by Angular into marked-up text in the view layer.

Peter Agyekum What are the types of decorators in angular?

Class decorators, e.g. @Component and @NgModule. Property decorators for properties inside classes, e.g. @Input and @Output. Method decorators for methods inside classes, e.g. @HostListener. Parameter decorators for parameters inside class constructors, e.g. @Inject.

Peter Agyekum What is Decorator in Angular?

Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified prior to its usage.

Peter Agyekum What is @component in angular?

What Is an Angular Component? Components are like the basic building block in an Angular application. Components are defined using the @component decorator. A component has a selector , template , style and other properties, using which it specifies the metadata required to process the component

Peter Agyekum What is RxJS in Angular?

Reactive Extensions for JavaScript (RxJS) is a reactive streams library that allows you to work with asynchronous data streams. ... RxJS can be used both in the browser or in the server-side using Node.

Peter Agyekum What is subscribe angular?

In Angular (currently on Angular-6) . subscribe() is a method on the Observable type. The Observable type is a utility that asynchronously or synchronously streams data to a variety of components or services that have subscribed to the observable. ... complete: Once all items are complete from the stream, do this method

Peter Agyekum What is difference between angular and AngularJS?

We can see the difference in their Components. The TypeScript that Angular uses are a superset of ES6, which has backward compatibility with ES5. Angular JS, based on JavaScript, uses terms of scope and controllers while Angular uses a hierarchy of components. Angular is component-based while AngularJS uses directives

Peter Agyekum Explain @Input() and @Output() decorator

@Input() and @Output() give a child component a way to communicate with its parent component. @Input() allows a parent component to update data in the child component. Conversely, @Output() allows the child to send data to a parent component.

Peter Agyekum What is host listener in angular?

In Angular, the @HostListener() function decorator allows you to handle events of the host element in the directive class. Let's take the following requirement: when you hover you mouse over the host element, only the color of the host element should change. ... In Angular, you do this using @HostListener()

Peter Agyekum What is the difference between @component and @directive in angular?

Component is a directive which use shadow DOM to create encapsulate visual behavior called components. ... Directives is used to add behavior to an existing DOM element. Component is used to break up the application into smaller components. Directive is use to design re-usable components.

Peter Agyekum what is constructor in angular

A constructor is a special method which will be called whenever we create new objects. And generally used of initializing the class members.

Peter Agyekum State some advantages of Angular over other frameworks.

Several built-in features like routing, state management, rxjs library, and HTTP

Peter Agyekum Please explain the various features of Angular.?

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

Peter Agyekum What are Lifecycle hooks in Angular? Explain some life cycles hooks?

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. ngAfterContentInit( ): It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component. ngAfterContentChecked( ): It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked. ngAfterViewInit( ): It responds after a component's view, or a child component's view is initialized. ngAfterViewChecked( ): It gets called after ngAfterViewInit, and it responds after the component's view, or the child component's view is checked. ngOnDestroy( ): It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.

Peter Agyekum Describe the MVVM architecture.

MVVM architecture removes tight coupling between each component. The MVVM architecture comprises of three parts: Model View ViewModel

Peter Agyekum What is the AOT (Ahead-Of-Time) Compilation? What are its advantages?

An angular application consists of components and templates which a browser cannot understand. Therefore, every Angular application needs to be compiled before running inside the browser. The Angular compiler takes in the JS code, compiles it, and then produces some JS code. It is known as AOT compilation and happens only once per occasion per user. There are two kinds of compilation that Angular provides: JIT(Just-in-Time) compilation: the application compiles inside the browser during runtime AOT(Ahead-of-Time) compilation: the application compiles during the build time. Advantages of AOT compilation: Fast Rendering: The browser loads the executable code and renders it immediately as the application is compiled before running inside the browser. Fewer Ajax Requests: The compiler sends the external HTML and CSS files along with the application, eliminating AJAX requests for those source files. Minimizing Errors: Easy to detect and handle errors during the building phase. Better Security: Before an application runs inside the browser, the AOT compiler adds HTML and templates into the JS files, so there are no extra HTML files to be read, thus providing better security for the application.

Peter Agyekum What is string interpolation in Angular?

string interpolation in Angular uses double curly braces i.e. {{ } in order to display the component data to view.

Peter Agyekum Explain Angular Authentication and Authorization.

The user who is login is authenticate his credentials through API, which is present on the server. Post server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication. Post logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

Peter Agyekum How to generate a class in Angular using CLI?

ng generate class Dummy [options] This will generate a class named Dummy.

Peter Agyekum How do Observables differ from Promises?

As soon as a promise is made, the execution takes place. However, this is not the case with observables because they are lazy. This means that nothing happens until a subscription is made. While promises handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

Peter Agyekum Please explain the difference between Angular and AngularJS?

Architecture - AngularJS supports the MVC design model. Angular relies on components and directives instead Dependency Injection (DI) - Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn’t support DI Expression Syntax - In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively Mobile Support - AngularJS doesn’t have mobile support while Angular does have Recommended Language - While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular Routing - For routing, AngularJS uses $routeprovider.when() whereas Angular uses @RouteConfig{(…)} Speed - The development effort and time are reduced significantly thanks to support for two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to upgraded features Structure - With a simplified structure, Angular makes the development and maintenance of large applications easier. Comparatively, AngularJS has a less manageable structure Support - No official support or updates are available for the AngularJS. On the contrary, Angular has active support with updates rolling out every now and then

Peter Agyekum What are directives in Angular?

Directives are one of the core features of Angular. They allow an Angular developer to write new, application-specific HTML syntax. In actual, directives are functions that are executed by the Angular compiler when the same finds them in the DOM. Directives are of three types: 1)Attribute Directives 2)Component Directives 3)Structural Directives

Peter Agyekum What are the building blocks of Angular?

There are essentially 9 building blocks of an Angular application. These are: Components – A component controls one or more views. Each view is some specific section of the screen. Every Angular application has at least one component, known as the root component. It is bootstrapped inside the main module, known as the root module. A component contains application logic defined inside a class. This class is responsible for interacting with the view via an API of properties and methods. Data Binding – The mechanism by which parts of a template coordinates with parts of a component is known as data binding. In order to let Angular know how to connect both sides (template and its component), the binding markup is added to the template HTML. Dependency Injection (DI) – Angular makes use of DI to provide required dependencies to new components. Typically, dependencies required by a component are services. A component’s constructor parameters tell Angular about the services that a component requires. So, a dependency injection offers a way to supply fully-formed dependencies required by a new instance of a class. Directives – The templates used by Angular are dynamic in nature. Directives are responsible for instructing Angular about how to transform the DOM when rendering a template. Actually, components are directives with a template. Other types of directives are attribute and structural directives. Metadata – In order to let Angular know how to process a class, metadata is attached to the class. For doing so decorators are used. Modules – Also known as NgModules, a module is an organized block of code with a specific set of capabilities. It has a specific application domain or a workflow. Like components, any Angular application has at least one module. This is known as the root module. Typically, an Angular application has several modules. Routing – An Angular router is responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when a user clicks on it. Services – A very broad category, a service can be anything ranging from a value and function to a feature that is required by an Angular app. Technically, a service is a class with a well-defined purpose. Template – Each component’s view is associated with its companion template. A template in Angular is a form of HTML tags that lets Angular know that how it is meant to render the component.

Peter Agyekum Please explain the differences between Angular and jQuery?

The single biggest difference between Angular and jQuery is that while the former is a JS frontend framework, the latter is a JS library. Despite this, there are some similarities between the two, such as both features DOM manipulation and provides support for animation. Nonetheless, notable differences between Angular and jQuery are: Angular has two-way data binding, jQuery does not Angular provides support for RESTful API while jQuery doesn’t jQuery doesn’t offer deep linking routing though Angular supports it There is no form validation in jQuery whereas it is present in Angular

Peter Agyekum Can you draw a comparison between the service() and the factory() functions?

Used for the business layer of the application, the service() function operates as a constructor function. The function is invoked at runtime using the new keyword. Although the factory() function works in pretty much the same way as the service() function does, the former is more flexible and powerful. In actual, the factory() function are design patterns that help in creating objects.

Peter Agyekum What is ngOnInit()? How to define it?

ngOnInit() is a lifecycle hook that is called after Angular has finished initializing all data-bound properties of a directive

Peter Agyekum What is SPA (Single Page Application) in Angular? Contrast SPA technology with traditional web technology?

In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike traditional web technology, SPA technology is faster and easy to develop as well. In conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The pro

Peter Agyekum What is the code for creating a decorator?

function Dummy(target) { dummy.log('This decorator is Dummy', target); }

Peter Agyekum What is the process called by which TypeScript code is converted into JavaScript code?

It is called Transpiling. Even though TypeScript is used for writing code in Angular applications, it gets internally transpiled into equivalent JavaScript.

Peter Agyekum Why prioritize TypeScript over JavaScript in Angular?

TypeScript is a superset of Javascript as it is Javascript + Types or extra features like typecasting for variables, annotations, variable scope and much more. The typescript is designed in a way to overcome Javascript shortcomings like typecasting of variables, classes, decorators, variable scope and many more. Moreover, Typescript is purely object-oriented programming that offers a "Compiler" that can convert to Javascript-equivalent code.

Peter Agyekum How is service defined in Angular?

A service is defined using a @Injectable decorator. A function defined inside a service can be invoked from any component or directive.

Peter Agyekum What is 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. A root module imports BrowserModule, whereas a feature module imports CommonModule.

Peter Agyekum What is component?

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. 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 Or ng g c test

Peter Agyekum What are lifecycle hooks in Angular? Explain a few lifecycle hooks?

Every component in Angular has a lifecycle, different phases it goes through from the time of creation to the time it's destroyed. Angular provides hooks to tap into these phases and trigger changes at specific phases in a lifecycle: ngOnChanges( ) This hook/method is called before ngOnInit and whenever one or more input properties of the component changes. This method/hook receives a SimpleChanges object which contains 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. ngAfterContentInit( ) It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component. ngAfterContentChecked( ) It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked. ngAfterViewInit( ) It responds after a component's view, or a child component's view is initialized. ngAfterViewChecked( ) It gets called after ngAfterViewInit, and it responds after the component's view, or the child component's view is checked. ngOnDestroy( ) It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers. Let’s understand how to use ngOnInit hook, since it’s the most oftenly used hook. If one has to process lot of data during component creation, it’s better to do it inside ngOnInit hook rather than the constructor:

Peter Agyekum Explain string interpolation and property binding in Angular.

String interpolation and property binding are parts of data-binding in Angular. Data-binding is a feature in angular, which provides a way to communicate between the component(Model) and its view(HTML template). 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. String interpolation uses the double curly braces {{ }} to display data from the component. Angular automatically runs the expression written inside the curly braces, for example, {{ 2 + 2 }} will be evaluated by Angular and the output 4, will be displayed inside the HTML template. Using property binding, we can bind the DOM properties of an HTML element to a component's property. Property binding uses the square brackets [ ] syntax.

Peter Agyekum How are Angular expressions different from JavaScript expressions?

The first and perhaps, the biggest difference is that Angular expressions allow us to write JavaScript in HTML which is not the case when it comes to JavaScript expressions. Next, Angular expressions are evaluated against a local scope object whereas JavaScript expressions against global window object.

Peter Agyekum How are observables different from promises?

1) Observable: Emits multiple values over a period of time. Lazy. An observable is not called until we subscribe to the observable. Can be cancelled by using the unsubscribe() method. Observable provides operators like map, forEach, filter, reduce, retry, retryWhen etc. 2) Promise: Emits a single value, Not Lazy(eager), Cannot be cancelled. The next difference is that Promises are always asynchronous. Even when the promise is immediately resolved. Whereas an Observable, can be both synchronous and asynchronous.

Peter Agyekum Angular by default, uses client-side rendering for its applications.? Can one make an angular application to render on the server-side?

Yes, angular provides a technology called Angular Universal, which can be used to render applications on the server-side. The advantages of using Angular Universal are : First time users can instantly see a view of the application. This benefits in providing better user experience. Many search engines expect pages in plain HTML, thus, Universal can make sure that your content is available on every search engine, which leads to better SEO. Any server-side rendered application loads faster since rendered pages are available to the browser sooner.

Peter Agyekum What are directives in Angular?

A directive is a class in Angular that is declared with a @Directive decorator. Every directive has its own behaviour and can be imported into various components of an application. Consider an application, where multiple components need to have similar functionalities. The norm thing to do is by adding this functionality individually to every component but, this task is tedious to perform. In such a situation, one can create a directive having the required functionality and then, import the directive to components which require this functionality. 1) Component directives: These form the main class in directives. Instead of @Directive decorator we use @Component decorator to declare these directives. These directives have a view, a stylesheet and a selector property. 2 Structural directives: These directives are generally used to manipulate DOM elements. Every structural directive has a ‘ * ’ sign before them. We can apply these directives to any DOM element. Let’s see some built-in structural directives in action: div *ngIf="isReady" class="display_name" {{name}} /div div class="details" *ngFor="let x of details" p{{x.name}}/p p {{x.address}}/p /div. In the above example, we can *ngIf and *ngFor directives being used. *ngIf is used to check a boolean value and if it’s truthy,the div element will be displayed. *ngFor is used to iterate over a list and display each item of the list. Attribute Directives These directives are used to change the look and behaviour of a DOM element. Let’s understand attribute directives by creating one: How to create a custom directive? We’re going to create an attribute directive: In the command terminal, navigate to the directory of the angular app and type the following command to generate a directive: ng g directive blueBackground The following directive will be generated. Manipulate the directive to look like this: import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appBlueBackground]' }) export class BlueBackgroundDirective { constructor(el:ElementRef) { el.nativeElement.style.backgroundColor = "blue"; } } Now we can apply the above directive to any DOM element: p appBlueBackground Hello World!/p

Peter Agyekum How does one share data between components in Angular?

Parent to child using @Input decorator. @Component({ selector: 'app-parent', template: ` app-child [data]=data /app-child ` , styleUrls: ['./parent.component.css'] }) export class ParentComponent{ data:string = "Message from parent"; constructor() { } } @ViewChild decorator is used to reference the child component as “child” property. Using the ngAfterViewInit hook, we assign the child’s data property to the messageFromChild property and use it in the parent component’s template. Child to parent using @Output and EventEmitter In this method, we bind a DOM element inside the child component, to an event ( click event for example ) and using this event we emit data that will captured by the parent component:

Peter Agyekum Explain the concept of Dependency Injection?

Dependencies in angular are nothing but services which have a functionality. Functionality of a service, can be needed by various components and directives in an application. Angular provides a smooth mechanism by which we can inject these dependencies in our components and directives. So basically, we are just making dependencies which are injectable across all components of an application.

Peter Agyekum Explain MVVM architecture?

MVVM architecture consists of three parts: 1. Model 2. View 3. ViewModel Model contains the structure of an entity. In simple terms it contains data of an object. View is the visual layer of the application. It displays the data contained inside the Model. In angular terms, this will be the HTML template of a component. ViewModel is an abstract layer of the application. A viewmodel handles the logic of the application. It manages the data of a model and displays it in the view. View and ViewModel are connected with data-binding (two-way data-binding in this case). Any change in the view, the viewmodel takes a note and changes the appropriate data inside the model.

Peter Agyekum What is Eager Loading, Lazy Loading, Pre-Loading in Angular?

1. What is Eager Loading? Feature modules under Eager Loading would be loaded before the application starts. This is the default module-loading strategy. 2. What is Lazy Loading? Feature modules under Lazy Loading would be loaded on demand after the application starts. It helps to start application faster. 3. What is Pre-Loading? Feature Modules under Pre-Loading would be loaded automatically after the application starts.

Peter Agyekum How do you secure routing in Angular?

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. There are five different types of guards and each of them is called in a particular sequence. The router’s behavior is modified differently depending on which guard is used. The guards are: CanActivate CanActivateChild CanDeactivate CanLoad Resolve

Peter Agyekum What is View child and content child?

What is content child? ContentChildren is a parameter decorator that is used to fetch the QueryList of elements or directives from the content DOM. The QueryList is updated whenever the child element/component is added or removed.

Peter Agyekum What are the steps to use animation module?

You need to follow below steps to implement animation in your angular project, Enabling the animations module: Import BrowserAnimationsModule to add animation capabilities into your Angular root application module(for example, src/app/app.module.ts). import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [ ], bootstrap: [ ] }) export class AppModule { }

Peter Agyekum What is one-way data binding in Agular?

‘ng-bind’ is an angular directive used for achieving one-way data binding. In one-way data binding, the template expression {{}} is used to bind a property to the DOM.

Back to HomePage

Explore Programming Skills?

Explore Home Features?

Explore Home Features?

Explore Home Features?

Explore Home Features?

Explore Home Features?

Explore Home Features?

Explore Home Features?