Angular is a super powerful JavaScript framework perfect for developing web and mobile apps. It’s quite different from others like React, thanks to its declarative approach, which streamlines development. If you’re itching to dive into Angular and master it, this guide is your new best friend.

Before anything else, ensure you’ve got Node.js set up on your machine. With Node.js in place, installing the Angular CLI (Command Line Interface) is a breeze using npm or Yarn. The CLI is magic—it simplifies tons of tasks in your Angular projects.

npm install -g @angular/cli

or

yarn global add @angular/cli

Once the CLI is on board, create a new Angular project with a snap of a command:

ng new my-app

Angular will ask you some questions to set up the project. For default settings, just hit Enter. Angular will then scaffold a default project with all necessary packages.

Angular CLI Commands

The Angular CLI is super versatile. You can perform many tasks with ease, thanks to simple commands. Here are a few essentials to get you rolling:

Create a new project:

ng new my-app

Generate components, directives, services, and pipes:

ng generate component MyComponent

Or the shorthand version if you’re into brevity:

ng g c MyComponent

Build and serve your application:

ng serve

This starts the development server and opens your app in the browser.

ng build --prod

This one builds the application for production and saves it in the dist directory.

Lint your app to catch those pesky errors:

ng lint my-app

And fix any issues found:

ng lint my-app --fix

Adding packages optimized for Angular? No worries:

ng add @angular/material

Angular Components

Think of Angular components as the building blocks of your application. They’re basically custom HTML tags with special behaviors. Each component comes with a template, a TypeScript class, and a stylesheet file.

Check out this simple component example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  name = 'Sunil';
}

Using the CLI, you can easily create components and they’ll be automatically registered with the nearest module.

Angular Lifecycle Hooks

Angular components have a neat lifecycle managed by the framework itself. Lifecycle hooks let you exert precise control over the various phases of a component’s life, from creation to destruction.

Here’s how you can use lifecycle hooks in a component:

class ComponentName {
  @Input('data') data: Data;

  constructor() {
    console.log(`new - data is ${this.data}`);
  }

  ngOnChanges() {
    console.log(`ngOnChanges - data is ${this.data}`);
  }

  ngOnInit() {
    console.log(`ngOnInit - data is ${this.data}`);
  }

  ngDoCheck() {
    console.log("ngDoCheck");
  }

  ngAfterContentInit() {
    console.log("ngAfterContentInit");
  }

  ngAfterContentChecked() {
    console.log("ngAfterContentChecked");
  }

  ngAfterViewInit() {
    console.log("ngAfterViewInit");
  }

  ngAfterViewChecked() {
    console.log("ngAfterViewChecked");
  }

  ngOnDestroy() {
    console.log("ngOnDestroy");
  }
}

Using these hooks, you can perform specific actions at various stages in the lifecycle of a component.

Angular Directives

Directives are like mighty tools that extend the behavior of HTML elements. There are three types: components, structural directives, and attribute directives.

• Components: The most common type, used to create custom HTML elements.
• Structural Directives: These change the structure of the DOM. You’ll often see examples like *ngIf and *ngFor.
• Attribute Directives: These alter the appearance or behavior of an element, an example being ngStyle.

Angular Routing

Navigating between different views in an app is where Angular Routing shines. You can define routes and seamlessly switch between them using the Router service.

Here’s a snippet on configuring routing in an Angular app:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This setup defines two routes: one for the home page and one for the about page.

Angular Services

Services are the backbone for sharing data between components. These are singleton classes that you can inject into your components.

Here’s an example of creating a service:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private data = ['Item 1', 'Item 2', 'Item 3'];

  getData() {
    return this.data;
  }
}

Then, inject this service into a component to access its goodies:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

This enables the component to access data provided by the service.

Angular Pipes

Pipes are wonderful for transforming data in templates. They come in handy for formatting dates, currencies, and more.

Here’s a quick example using the date pipe:

<div>
  <p>Today's date is {{ today | date }}</p>
</div>

And in your component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  today = new Date();
}

Your app will display the current date in a nicely formatted manner.

Component Communication

Sending data between components can get a bit tricky, but Angular makes it manageable with several methods.

• Input/Output: Use @Input and @Output decorators to pass data between parent and child components.
• Services: Share data between components using services.
• Event Emission: Notify parent components of changes in child components using event emission.

Here’s how to use @Input for parent-to-child data passing:

// Parent component
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [data]="data"></app-child>
  `
})
export class ParentComponent {
  data = 'Hello, Child!';
}

// Child component
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>Received data: {{ data }}</p>
  `
})
export class ChildComponent {
  @Input() data: string;
}

With this setup, the child component can receive data from the parent component.

Wrapping It Up

Angular is a real powerhouse framework offering a broad suite of features to build intricate web and mobile apps. From the mighty CLI to lifecycle hooks, directives, routing, services, and pipes, Angular arms you with all you need to create scalable, maintainable applications.

Mastering these concepts will enable you to tackle even the most complex projects with ease. Just remember, practice makes perfect. Start small, focus on the basics, and progressively take on more complex challenges. The Angular community is friendly and filled with resources to support you. Happy coding!