DEV Community

Cover image for Angular In Depth - Part 1

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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 ./
Enter fullscreen mode Exit fullscreen mode

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

Untitled 1.png

  • 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

Untitled 2.png

  • component based architecture co ordinates between view and data

Untitled 3.png

  • 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


Other than technical follow me on instagram

Top comments (0)