DEV Community

Cover image for Angular for beginners
FLUX
FLUX

Posted on

Angular for beginners

#angular #frontend #beginners

Setup

The command below will install Angular with global access.

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Why ?

Helps us scaffold the angular like creating new project, component, serving the application, building, etc.


# creating angular project named 'angular101'
ng new angular101
Enter fullscreen mode Exit fullscreen mode

According to your preferences select the options and you should get the project folder ready with name you had in your cli.

Running the project locally 


# go to the directory
cd angular101

# start/run the angular project
npm start
Enter fullscreen mode Exit fullscreen mode

We have our application running on 'http://localhost:4200' Under the hood we have 'ng serve' that runs the application ( to be angular specific )

Component

Angular follows component based architecture and these components are re-usable components with class based programming.

We use decorator '@Component' that turns a simple class into a component. The '@Component' decorator is called component's metadata. Which includes few properties like selector,imports...

We defined '@Component' BEFORE the class.

Properties we have in our '@Component' :

  1. selector: Every component has CSS selector that determines how component is used. For more about selectors

  2. imports: To use any other component,pipe or directive you must add it here in the imports array.

  3. templateUrl & styleUrl: Both component resides in relative directory where 'templateUrl' is to connect html file and styleUrl is to connect CSS file.

example


@Component({
standalone:true, // by default true ( no need to even write )
selector: 'app-root',
imports: [RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.css'
})

export class App{}
Enter fullscreen mode Exit fullscreen mode

Another thing to mention is 'standalone : true' is by default present from Angular 19 onwards and to reduce boilerplate we don't have it inside the component decorator.

What is standalone ?

Angular is components are standalone (not dependent on each other until and unless we explicitly dervice them in imports), meaning that you can directly add components to imports manually if we need. Before in angular we had app.module.ts which used to manage all the components at single place, manage all the modules, etc at single place but the standalone feature has provided each component to be independent and imports can be done inside each component.

Variable declaration in Angular ?

We cannot just simply use let or const inside the class because those are temporary variables which are meant to live and die inside method. Thus if you are pretty clear with temporal dead zones in Javascript then you must've understood the concept how const and let can contradict the OOP concept.

Curious deprecation of app.module.ts

Angular uses standalone components since v17 and the NgModules are deprecated.

What was NgModule used for ?

Before we used to import and declare all the imports in one place of all the components at same place which used to cause unnecessary bloating thus standalone introduced managing the components dependency inside its own component deprecating the central registry.

TLDR : A component imports what it uses

Input and Output

Input

The input function allows us to use Angular input in components. The input function would either have a optional input with inital value or have a required value instead.

Inputs are signals that hold the latest value of input bound from the parent.

course-card.ts

export class CourseCard {
  course = input.required<Course>();
}
Enter fullscreen mode Exit fullscreen mode 
course-card.html

<div class="course-card">
    <div class="course-desc">
        {{ course().description }}
    </div>
    <div class="image">
        <img [src]="course().iconUrl" alt="logo" width="300">
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Let us fix something with keyword called '@let'

Sometimes we need to simplify the stuff ( more readable code ) then we can use the '@let' keyword to take the control over the code and instead of repeating stuff ex:

We can see above code where we are repeating the 'course()' so let us simply make it something more simple by declaring the 'course()' once and then using it something like this below.

course-card.html

@let c = course();// defining once reusing it later

<div class="course-card">
    <div class="course-desc">
        {{ c.description }}
    </div>
    <div class="image">
        <img [src]="c.iconUrl" alt="logo" width="300">
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Output

The output function allows us to use the Angular output in components. You can use outputs to emit values to parent component.

How do we manage the output ? Template event binding :


(courseSelected)="showSelectedCourse($event)"
Enter fullscreen mode Exit fullscreen mode

example for setting up output :

course-card.ts ( setting up output event )

export class CourseCard {
  course = input.required<Course>();

  courseSelected = output<Course>();

  onCourseViewed(){
    this.courseSelected.emit(this.course());
  }
}
Enter fullscreen mode Exit fullscreen mode 
course-card.html

@let c = course();

<div class="course-card">
    <div class="course-desc">
        {{ c.description }}
    </div>
    <div class="image">
        <img [src]="c.iconUrl" alt="logo" width="300">
    </div>
    <button (click)="onCourseViewed()">View course</button>
</div>
Enter fullscreen mode Exit fullscreen mode 
app.ts

export class App {
  protected readonly title = signal('Angular project lol');
  coreCourse = COURSES[0];
  rxJsCourse = COURSES[1];

  onCourseSelected(course:Course){
    console.log(`Seleted course :`,course)
  }
}
Enter fullscreen mode Exit fullscreen mode

The child component emits a custom event via 'courseSelected' output, the parent binds to that event in its template with '(courseSelected=onCourseSelected($event)'

app.html

<div>
  <h1> {{ title() }} </h1>
  <!-- <h2> {{ subtitle }}</h2> -->
  <div class="courses">
    <course-card (courseSelected)="onCourseSelected($event)" [course]="coreCourse" ></course-card>
    <course-card (courseSelected)="onCourseSelected($event)" [course]="rxJsCourse" ></course-card>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Below is table for better understanding

Direction TS Declaration Template Binding
Parent → Child (Data) x = input<T>() [x]="..."
Child → Parent (Event) y = output<T>() (y)="handler($event)"
Two-way Binding z = model<T>() [(z)]="..."

@for,@if,@switch

The different ways of using $index , $count inside for parent level, let, alias, let+alias

Few more jargons like $even,$odd,$first,$last

Top comments (0)