Interview Question and Answers: November 2019

Sunday, 3 November 2019

How to generate a class, interface and enum using angular CLI?

To generate a class, use
ng generate class className

ng g cl className

For example, to generate an employee class use
ng g cl employee

The above command places the employee class directly in the "app" folder. Instead if you want the employee class in a different folder, simply prefix the name of the folder. The command below creates a folder with name "employee" and then creates the "employee" class in it.

ng g cl employee/employee

By default, a spec file is not created for the class. If you want a spec file to be generated set --spec option to true.

ng g cl employee/employee --spec=true

To generate an interface use

ng generate interface interfaceName

ng g i interfaceName

To generate an enum use

ng generate enum enumName

ng g e enumName

How to generate a new module using angular CLI?

Like component and services, we can create module in the same way. Below are the commands

ng g m students -d -m=app.module

ng g m students -d -m=app.module --spec=true

ng g m students -d -m=app.module --spec=true --flat=true

ng g m students -m=app.module --spec=true --flat=true

How to generate a new Service?

To generate a service, we use

ng generate service serviceName

ng g s serviceName

While creating a service it will not register with app.module.ts file. We can instruct angular CLI to register while creating the service. But below command works with angular 2 and 4 not in latest version of angular CLI.

All the options which are valid for creating a component are applicable for service as well. So, we can use those command with service as well.

How to generate a new component using angular CLI?

Below are the commands to create a new component

ng generate component abc

You can tell the angular CLI to place a component at a particular folder. If folder is existing then it will place there or else it will create a new folder for you and place the component at there.

If you do not want to create a component in its own folder then you may do this by using below command. In this case component is created under app folder.

If you do not want to create the spec files (used for unit testing), use below command.

In the above it says spec is deprecated and we can use skipTests instead of this.

We can use -d option which stands for dry run. Means it will show you what angular CLI will do for you.

To use sass instead of CSS with your component, use the --style=scss flag with ng generate command. If you want less use --style=less

What are the different options can be used with CLI ng new Command?

Below are default values, alias and a short description which can be used with ng new command to create a new project.

Flag	Type	Default	Alias	Purpose
--dry-run	Boolean	false	-d	Run through without making any changes. Just reports the files that will be created
--skip-install	Boolean	false	-si	Skip installing packages
--skip-tests	Boolean	false	-st	Skip creating tests
--inline-style	Boolean	false	-is	Use inline styles when generating the new application
--inline-template	Boolean	false	-it	Use inline templates when generating the new project

How to create a new project using angular CLI?

To create a new project, open the command prompt in admin mode and run the below command.

c \>ng new MyFirstApp

It will create a brand-new project with all required configuration and packages.

To open the source code using visual code navigate to project folder

c \>cd MyFirstApp

c \> MyFirstApp>code .

It will open the source code in the visual studio code editor.

To run the project use below command.

c \> MyFirstApp>ng serve –open

c \> MyFirstApp>ng s –o

To run all the unit tests, use the following command
ng test

To run all the end-to-end tests, use the following command
ng e2e

How to install angular CLI?

To install Angular CLI you should have installed Node 6.9.0 or higher, and NPM 3 or higher. To check the versions that you have on your machine type the following commands in a command window.

· node -v

· npm -v

Once you have Node and NPM installed. Run Command Prompt as an administrator and execute the following command. Flag -g installs Angular CLI globally on your machine.
npm install -g @angular/cli

You can also use i as shortcut for install. So, the above command can also be rewritten as shown below

npm i -g @angular/cli

To verify the version of Angular CLI installed, execute the following command
ng -v

Angular CLI should be installed globally so that it will be available to all the project. If you install only for project specific then it will not available for other projects.

What is angular CLI?

Manually setting up an Angular application from scratch is a laborious and time-consuming process. You have to manually write all the boilerplate code yourself, which is not only monotonous but also time consuming. Angular CLI is such a tool. It helps us create angular applications, components, modules, pipes, directives, services and much more with great speed and consistency while still following the angular teams’ best practices and conventions.

· CLI stands for Command Line Interface. So Angular CLI is command line tool the help us

· Create Angular applications faster and with great consistency

· Create the boiler plate code for angular features like components, directives, pipes, services etc.

· Create boiler plate code for TypeScript features like classes, interfaces, enums etc.

· It follows angular best practices and conventions out of the box

· Run Unit and End-to-End (e2e) tests

· Create optimised builds for deployment to production

What are different ways to pass data from one component to other component ?

There are several techniques to pass data between components in angular. If the components are nested, then there is a parent child relationship between those components.

To pass data from the parent to child component we use input properties.

To pass data from the child component to parent component we can either use output properties or template reference variables.

Below is the summery:

Passing data from Parent Component to Child Component

Input Properties (@Input())

Passing data from Child Component to Parent Component

Output Properties (@Output())

Template Reference Variables

Passing data from Component to Component (No parent child relation)

Angular Service

Required Route Parameters

Optional Route Parameters

Query Parameters

What is two-way data binding in angular?

Two-way data binding: One of powerful feature of angular is two-way data binding where both view template and component class get effected when some changes occurred. See the below example

The above code will not work as it is using [(ngModel)] because this is not available and not known to the angular. To work this, we need to add FormsModule references into AppModule.ts file.

Here are the steps to import FormsModule into AppModule

1. Open app.module.ts file
2. Include the following import statement in it
import { FormsModule } from '@angular/forms';
3. Also, include FormsModule in the 'imports' array of @NgModule
imports [BrowserModule, FormsModule]

What is event binding in angular?

Event Binding: Below all are one direction data binding where data binds from component to view template i.e. to HTML

1. Interpolation
2. Property Binding
3. Attribute Binding
4. Class Binding
5. Style Binding

But in some cases, we need binding from view template to component class. This means let say we have a button click event. As per the click event the changes need to happen in the view template. In this case data should flow from view template to component. For this we can use event binding.

Below is the example

Interview Question and Answers