

ng start my-learn-project
cd my-learn-project
ng serve
I choosed of course Typescript and scss
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
// add
// bellow
// 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
// in course.component.html
{{title}}
// in course.component.ts
// add in the class
title = "I'm a Title";
// We should now see in the browser
I'm a Title
// in course.component.html
{{ title }}
-
{{ course }}
// 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();
}
}
// 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 { }
// course.component.html
// course.component.ts
imageUrl= "https://4wobi.com/wp-content/uploads/2021/08/Wobi_Logo-croped.svg";
// course.component.html
// course.component.ts
colSpan = 2;
npm install bootstrap --save
// style.scss
@import "~bootstrap/dist/css/bootstrap.css";
// course.component.html
// course.component.html
// course.component.ts
isActive = true;
// course.component.html
// course.component.html
// course.component.ts
onEvent($event: any) {
$event.stopPropagation();
console.log("Button clicked", $event);
}
// course.component.html
// course.component.ts
onKeyUp() {
console.log("enter was pressed");
}
// course.component.html
// course.component.ts
onKeyUp(email: any) {
console.log(email);
}
// course.component.html
// course.component.ts
email = "email@adress.com";
onKeyUp() {
console.log(this.email);
}
// app.module.ts
import { FormsModule } from '@angular/forms';
imports: [
FormsModule
]
// course.component.html
{{ course.title | uppercase | lowercase }}
{{ course.students | number }}
{{ course.rating | number: "2.1-1" }}
{{ course.price | currency: "AUD":true:"3.2-2" }}
{{ course.releaseDate | date: "shortDate" }}
// course.component.ts
course = {
title: "The Complete Angular Course",
rating: 4.96444,
students: 123123,
price: 991.29,
releaseDate: new Date(2020, 2, 1)
}
ng g pipe course/summary
// course.component.html
{{ costumPipe | summary }}
{{ costumPipe | summary:20 }}
// 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
],
Thats it have fun