Diego-EC / angular-demo

Simple project to learn how to use Angular. It has a backend in https://github.com/Diego-EC/angular-demo-backend

angular-demo

Simple project to learn how to use Angular. It has a backend in https://github.com/Diego-EC/angular-demo-backend

In this demo I've used

1. Responsive
2. Reactive Forms
3. Routing
4. Communication Between Components
5. httpclient
   • CORS

Responsive

flex-layout

Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. API-Documentation

<div fxLayout="column" fxLayoutAlign="center center"  fxLayoutGap="3rem">

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">

• ng-container es como el Fragment de React

<ng-container>
 <div>Foo</div>
 <div>Bar</div>
</ng-container>

 

Reactive Forms

• Start by installing the Angular Layout library from npm

$ npm i -s @angular/flex-layout @angular/cdk

• Imports

import { ReactiveFormsModule } from '@angular/forms';
import { FormBuilder } from '@angular/forms';

[formGroup]="myForm"
formControlName="email"

• FormBuilder: in the TypeScript

• FormGroup: in the HTML

 

Routing

• It is similar to React

• app.module.ts

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'students', component: StudentsComponent },
  { path: '',   redirectTo: '/login', pathMatch: 'full' },
];

  imports: [
    ReactiveFormsModule,
    RouterModule.forRoot(routes)
  ],

• app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

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

• routerLink

<button routerLink="/students">Login</button>

 

Communication Between Components

• @Input: From parent to child

  • In the children

  import { Input } from '@angular/core';
  
  export class StudentComponent implements OnInit {
    @Input() student: Student;
    @Input() index: number;
  }

  • In the parent

  <app-student *ngFor="let student of students; let i = index" [student]="student" [index]="i"></app-student>

• @Output: From child to parent

 

httpclient

import { HttpClientModule } from '@angular/common/http';

  getAllStudents(){
    const path = "https://jsonplaceholder.typicode.com/users";
    return this.httpClient.get<Student[]>(path);
  }

this.studentService.getAllStudents().subscribe(students => console.log(students));

CORS

• proxy.conf.json
• @CrossOrigin