Angular is a component-based application design framework, build on Typescript, for creating a sophisticated & a scalable single-page web application that has a well-integrated collection of libraries that helps to develop the code in module-wise with an easy-to-update, debug module. In order to work with Angular, we must have node.js, Node Package Manager(NPM) & Angular CLI installed in the system. Please refer to the Installation of Node.js on Windows/Linux/Mac article for the detailed installation procedure.

Steps to Install & Create a new Angular Project

After successful installation of the node.js & npm, we need to install the Angular CLI, which is described below:
Open the terminal/Command prompt & type the below command:

npm install -g @angular/cli

For checking the version of the node.js & angular CLI installed, type the below command in the cmd:

node -v
ng -v or ng --version

Now, we will create the Angular application using the Angular CLI, as given below:

ng new Project-Name

You may navigate to any of the directories where you want to create the project.

Run the application

Navigate the folder where the project has been created & type the below command to run the app:

cd Project-Name
ng serve --open

The ng serve command will launch the server & will open your browser to http://localhost:4200/.

Angular Fundamental

This section will cover the Components, Creation of Components, Lifecycle of the Component, and various directives provided by Angular & lastly, we will discuss the Decorator. The Component is the basic building block for developing UI for any Angular app, which contains the tree of Angular Component. The Directives are the subset for the components, where the Components are always associated with the template. Only a single Component would be instantiated for a given element in the template. The Components should belong to the NgModule, which helps to avail the component to another component or application. In order to do this, the component should be listed in the declarations field of the NgModule metadata. 

Components

Component Creation

The Angular application is composed of a different set of components, where every component has different roles & functionality that is designed to perform the specific task. The Components can be created with the following command:

ng generate component <component-name>

Please refer to the Components in Angular 8 article for further detailed descriptions.

Lifecycle Hooks of Component

Every Component has its own lifecycle, which will be started when Angular instantiates the particular Component class that renders the Component view along with the child view. It is basically timed methods that differ when and why they execute. These methods will be triggered with the change detection, i.e., depending upon the conditions, the corresponding cycle will be executed. Angular will constantly check when the data-bound properties changes & accordingly update both the view & the Component instances, as required. The order of the execution for these lifecycle hooks is important. The Component instance will be destroyed & will be removed its rendered templates from the DOM by Angular when the lifecycle ends.

Modules

Every Angular application contains the root module, called NgModules, which acts as the container for the cohesive block of code, that is specifically designed to that application domain, a workflow, or a closely related set of capabilities. It consists of the components, services, & other code files, whose scope is decided by the NgModules. The NgModules in the AppModule, reside in the app.module.ts file. The  @NgModule() class decorator is used to define the NgModule. It is a function that accepts one metadata object, whose properties describe the module. 

Directives

The Directive is generally a built-in class that includes the additional behavior to elements in the Angular Applications. There are 2 types of directives:

Attribute Directive

The Attribute Directive is used to modify the appearance or change the behavior of DOM elements & the components in Angular. In this case, the element, component, or another directive can be styled.

Structural Directive

The Structural Directive is used to change the structure of the element or the component, i.e. it is used for modifying the structure of the DOM by applying or removing the elements from the DOM.