3 |
7 |
4 | ![banner image]()
5 |
6 | cart works!
2 | -------------------------------------------------------------------------------- /src/app/admin/components/form-product/form-product.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/admin/components/product-edit/product-edit.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/components/cart/cart.component.html: -------------------------------------------------------------------------------- 1 |cart works!
2 | -------------------------------------------------------------------------------- /src/app/products/components/product-detail/product-detail.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/contact/components/contact.component.html: -------------------------------------------------------------------------------- 1 |contact works!
2 | -------------------------------------------------------------------------------- /src/app/home/components/home/home.component.html: -------------------------------------------------------------------------------- 1 |{{product.description}}
11 |{{ product.description | slice:0:10 }}
15 |{{ today | date:'longDate'}}
16 || Id | 6 |{{row.id}} | 7 |Name | 12 |{{row.name}} | 13 |
|---|
Este es david
10 |Este es nicolas
11 |Este es julian
12 |No hace match, intenta con 'david'
13 |34 | {{ "Hola Mundo " + 1 }} 35 |
36 | 37 | 38 | {{ power | exponential:3 }} 39 | -------------------------------------------------------------------------------- /src/app/admin/components/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { map } from 'rxjs/operators'; 3 | import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'; 4 | 5 | @Component({ 6 | selector: 'app-dashboard', 7 | templateUrl: './dashboard.component.html', 8 | styleUrls: ['./dashboard.component.scss'] 9 | }) 10 | export class DashboardComponent { 11 | /** Based on the screen size, switch from standard to one column per row */ 12 | cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( 13 | map(({ matches }) => { 14 | if (matches) { 15 | return [ 16 | { title: 'Card 1', cols: 1, rows: 1 }, 17 | { title: 'Card 2', cols: 1, rows: 1 }, 18 | { title: 'Card 3', cols: 1, rows: 1 }, 19 | { title: 'Card 4', cols: 1, rows: 1 } 20 | ]; 21 | } 22 | 23 | return [ 24 | { title: 'Card 1', cols: 2, rows: 1 }, 25 | { title: 'Card 2', cols: 1, rows: 1 }, 26 | { title: 'Card 3', cols: 1, rows: 2 }, 27 | { title: 'Card 4', cols: 1, rows: 1 } 28 | ]; 29 | }) 30 | ); 31 | 32 | constructor(private breakpointObserver: BreakpointObserver) {} 33 | } 34 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'platzi-store'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.componentInstance; 26 | expect(app.title).toEqual('platzi-store'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.nativeElement; 33 | expect(compiled.querySelector('.content span').textContent).toContain('platzi-store app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/shared/components/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormControl, Validators, AbstractControl } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-footer', 6 | templateUrl: './footer.component.html', 7 | styleUrls: ['./footer.component.scss'] 8 | }) 9 | export class FooterComponent implements OnInit { 10 | 11 | emailField: FormControl; 12 | 13 | constructor() { 14 | // FormControl('Default value', validators[], asyncValidators[]); 15 | // FormControl(formState?: any, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl 16 | 17 | this.emailField = new FormControl('', [ 18 | Validators.required, 19 | Validators.maxLength(50), 20 | Validators.minLength(4), 21 | Validators.email, 22 | Validators.pattern(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/) 23 | ]); 24 | this.emailField.valueChanges 25 | .subscribe( value => { 26 | }); 27 | } 28 | 29 | 30 | ngOnInit(): void { 31 | } 32 | 33 | sendEmail(){ 34 | if(this.emailField.valid) { 35 | console.log(this.emailField.value); 36 | } 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /src/app/admin/components/list-products/list-products.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 3 | import { MatPaginatorModule } from '@angular/material/paginator'; 4 | import { MatSortModule } from '@angular/material/sort'; 5 | import { MatTableModule } from '@angular/material/table'; 6 | 7 | import { ListProductsComponent } from './list-products.component'; 8 | 9 | describe('ListProductsComponent', () => { 10 | let component: ListProductsComponent; 11 | let fixture: ComponentFixtureno hay productos
7 | 8 || ID | 7 |{{product.id}} | 8 |title | 11 |{{product.title}} | 12 |price | 15 |{{product.price}} | 16 |actions | 19 |20 | 21 | 22 | | 23 |
|---|
Looks like the page you were looking for is no longer here.
9 |114 | Las suma de 2 + 2 = {{ 2 + 2 }} 115 |
116 | ``` 117 | 118 | Angular divide la lógica de la vista, pero puedes hacer uso de los elementos de uno o del otro en las 2 partes. 119 | 120 | ## `{{ template-expression }}` 121 | 122 | Un template expresion es la expresión que se va a evaluar para renderizarse en el DOM. 123 | 124 | Los tipos de **Template Expresion** válidos pueden ser: 125 | 126 | - **{{ `1 + 1` }}**: la cual devuelve 2 127 | - **{{ `miVariable` }}**: donde miVariable es una variable definida en el **Component** 128 | - **{{ `miMetodo()` }}** : donde miMetodo() es un método definido en el **Component** 129 | 130 | También se le puede asignar a un atributo **HTML** (que espere un string) el valor de una **Template Expresion**, por ejemplo 131 | 132 | `