Angular In Depth - Part 1

Exploring core concepts of Angular in depth

This series of Angular in depth will cover all the following features part by part :

• Basic Understanding of Angular and features
• Custom components with @Component
• Components @Input and @Output, event Emitters
• ngFor
• ngIf
• ngClass
• ngStyle
• ngSwitch
• Built-In Pipes
• Async Pipe
• Custom Pipes
• @Injectable and Custom Services
• HTTP Client - GET POST PUT DELETE

This article concentrates on key features of Angular and basics setup to start with any application.

We will build an example application throughout the whole series and understanding all core features

Basic Understanding of Angular and features

Things required to start Angular development

• Understanding on HTML, CSS, Typescript
• Node installed in system

Download | Node.js

• install angular cli to scaffold application

npm install -g @angular/cli

Take a tour of the example application

Lets take a tour on example application "Crazy developers" together by exploring all Angular topics one by one

Create new Angular application using Angular CLI

ng new crazydevelopersapp

• ng : referring to angular CLI
• new : is the keyword to create new angular application
• crazydevelopersapp : application name

If project needs to be created in existing folder

ng new *crazydevelopersapp* --directory ./

CLI asks to enable routing choose yes and choose SCSS for stylesheets. folder structure after scaffolding the template looks like this

Okay now Why Angular ?

we will see main features of Angular Core with an example

• custom HTML content: You can create your own custom HTML content and extend application functionality.

app-root is the custom HTML Tag for app component html

• separating data or the model of the application from view template

  below example shows title in html tag is a variable consists of string "crazydeveloper" in component.ts

• component based architecture co ordinates between view and data

• built in change detection mechanism which is completely transparent which synchronizes with view

• Updating of data in secure way

We will discuss on components, @Input, @Output and Event emitter in our next article.

For latest news on Angular core and other technical articles. follow me on

In-Depth Angular - Medium

CodeWithAbi

Other than technical follow me on instagram

https://www.instagram.com/abi_aradhya/