Angular – Learn Project

Table of Contents

Source

Angular Learn Project

Create Project with CLI

				
					ng start my-learn-project
cd my-learn-project
ng serve

I choosed of course Typescript and scss

Create Component

				
					ng generate component course
// or short 
ng g c course
				
			
				
					// We get
CREATE src/app/course/course.component.html (21 bytes)
CREATE src/app/course/course.component.spec.ts (626 bytes)
CREATE src/app/course/course.component.ts (276 bytes)
CREATE src/app/course/course.component.sass (0 bytes)
UPDATE src/app/app.module.ts (475 bytes)
				
			
				
					// Lets test if the component works
// in learn-project\src\app\app.component.html
// delete all the code exept <router-outlet></router-outlet>
// add

<app-course></app-course>

// bellow <router-outlet></router-outlet>
				
			
				
					// Check browser we should get

course works!
				
			
				
					// this are all boilerplates we can create with ng generate
    app-shell
    application
    class
    component
    directive
    enum
    guard
    interceptor
    interface
    library
    module
    pipe
    resolver
    service
    service-worker
    web-worker

Interpolation

				
					// in course.component.html
<h2> {{title}} </h2>

// in course.component.ts
// add in the class

title = "I'm a Title";
				
			
				
					// We should now see in the browser

I'm a Title

Directives

				
					// in course.component.html
<h2>{{ title }}</h2>
<ul>
  <li *ngFor="let course of courses">
    {{ course }}
  </li>
</ul>

Services

				
					// Create a Service
ng generate service course/courses
// or
ng g s course/courses
				
			
				
					// This will create
CREATE src/app/course/courses.service.spec.ts (362 bytes)
CREATE src/app/course/courses.service.ts (136 bytes)
				
			
				
					// courses.service.ts looks like this
import { Injectable } from '@angular/core';    // we need this if we have dependencies in our Service

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

  constructor() { }
}

				
			
				
					// courses.service.ts  add this
import { Injectable } from '@angular/core';

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

  constructor() { }

  getCourses(){
    return ["course1", "course2", "course3"];
  }
}
				
			
				
					// course.component.ts
import { Component, OnInit } from '@angular/core';

import { CoursesService } from './courses.service';

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.sass']
})
export class CourseComponent implements OnInit {
  title = "I'm a Title";
  courses: any;

  constructor(private service: CoursesService) { }

  ngOnInit(): void {
    this.courses = this.service.getCourses();
  }

}
Dependency Injection
				
					// in app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseComponent } from './course/course.component';

import { CoursesService } from './course/courses.service';

@NgModule({
  declarations: [
    AppComponent,
    CourseComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [CoursesService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Property Binding

				
					// course.component.html
<img [src]="imageUrl" />

// course.component.ts
imageUrl= "https://4wobi.com/wp-content/uploads/2021/08/Wobi_Logo-croped.svg";

Attribute Binding

				
					// course.component.html
<table>
  <tr>
    <td [attr.colspan]="colSpan"></td>
  </tr>
</table>

// course.component.ts
colSpan = 2;

Adding Bootstrap

				
					npm install bootstrap --save

// style.scss
@import "~bootstrap/dist/css/bootstrap.css";

// course.component.html
<button class="btn btn-primary">Save</button>

Class Binding

				
					// course.component.html
<button [class.active]="isActive">Save</button>

// course.component.ts
isActive = true;

Style Binding

				
					// course.component.html
<button [style.backgroundColor]="isActive ? 'blue' : 'white'">Style Binding</button>

Event Binding

				
					// course.component.html
<button (click)="onEvent($event)">Event Binding</button>

// course.component.ts
 onEvent($event: any) {
    $event.stopPropagation();
    console.log("Button clicked", $event);
  }

Event Filtering

				
					// course.component.html
<input (keyup.enter)="onKeyUp()" />

// course.component.ts
onKeyUp() {
    console.log("enter was pressed");
}

Template Variables

				
					// course.component.html
<input #email (keyup.enter)="onKeyUp(email.value)" />

// course.component.ts
  onKeyUp(email: any) {
    console.log(email);
  }

Two-way Binding

				
					// course.component.html
<input [(ngModel)]="email" (keyup.enter)="onKeyUp()" />

// course.component.ts
  email = "email@adress.com";
  
    onKeyUp() {
    console.log(this.email);
  }
  
// app.module.ts
import { FormsModule } from '@angular/forms';

  imports: [
    FormsModule
    ]

Pipes

				
					// course.component.html
{{ course.title | uppercase | lowercase }} <br />
{{ course.students | number }} <br />
{{ course.rating | number: "2.1-1" }} <br />
{{ course.price | currency: "AUD":true:"3.2-2" }} <br />
{{ course.releaseDate | date: "shortDate" }}<br />

// course.component.ts
  course = {
    title: "The Complete Angular Course",
    rating: 4.96444,
    students: 123123,
    price: 991.29,
    releaseDate: new Date(2020, 2, 1)
  }

Custom Pipes

				
					ng g pipe course/summary

// course.component.html
{{ costumPipe | summary }} <br />
{{ costumPipe | summary:20 }} <br />

// course.component.ts
  costumPipe = `Lorem ipsum dolor sit,
                amet consectetur adipisicing elit. Impedit sequi animi deserunt mollitia explicabo,
                illum, pariatur officia qui, aliquam eos rerum iure
                sed culpa enim officiis ea asperiores a veritatis `;

// summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'summary'
})
export class SummaryPipe implements PipeTransform {

  transform(value: string, limit?: number)  {
    if (!value)
      return null;

      let actualLimit = (limit) ? limit : 50;
      return value.substr(0, actualLimit) + '...';
  }
}

// app.module.ts
import { SummaryPipe } from './course/summary.pipe';

  declarations: [
    SummaryPipe
  ],

Input Properties

Thats it have fun

Leave a Comment