Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Examen Final-Richardi

    Cargado por

    Bryan Richardi
    8 vistas3 páginas
    El resumen describe un examen final de Angular que contiene una sección teórica con preguntas de verdadero o falso y una sección práctica donde se pide implementar un componente para mostrar listas de platos usando ngIf y ngFor, y también implementar pipes para realizar búsqueda por marca y precio en una lista de productos.

    Descripción original:

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    El resumen describe un examen final de Angular que contiene una sección teórica con preguntas de verdadero o falso y una sección práctica donde se pide implementar un componente para mostrar listas de platos usando ngIf y ngFor, y también implementar pipes para realizar búsqueda por marca y precio en una lista de productos.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    Descargar como docx, pdf o txt
    8 vistas3 páginas

    Examen Final-Richardi

    Cargado por

    Bryan Richardi
    El resumen describe un examen final de Angular que contiene una sección teórica con preguntas de verdadero o falso y una sección práctica donde se pide implementar un componente para mostrar listas de platos usando ngIf y ngFor, y también implementar pipes para realizar búsqueda por marca y precio en una lista de productos.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    Descargar como docx, pdf o txt
    de 3

    EXAMEN FINAL DE ANGULAR

    RICHARDI CUBA BRYAN ADOLFO


    Parte Teórica:

    1. Con respecto a Angular responder (V) o (F) justifique su res puesta brevemente. (5.0 puntos)
    a. Angular solo acepta codificación en el lenguaje Tvpescript.
    ( F ) TAMBIEN ACEPTA JAVASCRIPT
    b. Un pipe permite transformar una propiedad interpolada ((}) mejorando la salida en el html.

    ( V ) son funciones que se llaman en una vista (html) y que tienen por objetivo transformar

    c. Los proyectos en Angular solo tienen un módulo asociado y no permite generar más
    módulos.
    ( V ) Un módulo tiene por objetivo agrupar un conjunto de componentes relacionadas entre si.

    d. No es necesario configurar el app-routing-module para poder acceder al componente


    mediante un routerLin k dentro de un navBar.
    ( F ) Por convención, el nombre de la clase del módulo es AppRoutingModule y pertenece
    a app-routing.module.ts en la carpeta src/app.

    e. La programación reactiva Rxjs utiliza el patrón observable para subscribir a los componentes
    que llaman a algún servicio.
    (V)

    f. HttpClientModule debe de importarse en el app. moduIe.ts de nuestra aplicación para poder


    acceder a un api del tipo json -server como cliente.
    (V)

    g. Un servicio en Angular consta de 2 archivos (ts y html).


    (F)

    h. Los Servicios en Angular se injectan a los componentes que los solicitan mediante su
    constructor.
    (V)

    i. Un pipe permite transformar una propiedad interpolada ((}) mejorando la salida en


    el html.
    (V)
    Para recorrer una Iista se utiliza la directiva ’ngstvitch y ‘ngStvitchCase.
    (V)

    Parte Practica:

    Usted ha sido contratado por la empresa CiberFront y como su desempeño ha sido destacable en
    estos meses que Ileva, el jefe de provectos le ha pedido desarrollar en angular lo siguiente:
    Z. Implementar un componente que permita mostrar dos listas de platos: platos nacionales v
    platos internacionales. Cada Iista se muestra cuando se da click en el botón que permite desplegar
    la Iista. Sugerencia Utilice la directiva ’nglf, ’ngFor. (7.0 puntos)

    2. Implementar dos pipes que permitan realizar la búsqueda por el campo marca y precio
    respectivamente desde un arreglo de objetos que guarda información de los productos
    cuyos atributos son: id, nombre, marca, modelo, precio y stock. Deberá mostrar en un json
    el detalle de los productos de la marca indicada.

    IMPLEMENTANDO PIPE COMPONENTE.TS

    import { Component, OnInit } from '@angular/core';

    @Component({
    selector: 'app-buscador-pipe',
    templateUrl: './buscador-pipe.component.html',
    styleUrls: ['./buscador-pipe.component.css']
    })
    export class BuscadorPipeComponent implements OnInit {

    equipos=[
    {id:1, nombre: 'Televisor', marca:'LG', precio:20 , stock:2},
    {id:2, nombre: 'Refrigerador', marca:'LG', precio:20 , stock:3},
    {id:3, nombre:'Laptop', marca:'SAMSUNG', precio:20 , stock:4},
    {id:4, nombre:'Celular', marca: 'SAMSUNG', precio:20 , stock:6},
    {id:5, nombre:'Tablet', marca:'HUAWEI', precio:20 , stock:2},

    query:string='';

    constructor() { }

    ngOnInit(): void {
    }

    }
    BUSCADOR PIPE HTML

    <div class="container">
    <p class="lead fs-3">Buscador Pipe</p>
    <input type="text" [(ngModel)]="query" class="m-2" />
    <hr/>
    <div class="bg-info shadow p-2 m-2">
    <pre>
    <p>{{usuarios |pipeuser:query |json}}</p>
    </pre>
    </div>
    </div>

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
    name: 'pipeuser'
    })
    export class PipeuserPipe implements PipeTransform {

    transform(value: any[], query: string): unknown {


    if(query===''|| query===undefined){
    return value;
    }

    return
    value.filter(x=>x.nombre.toLowerCase().indexOf(query.toLowerCase())!=-1);
    }
    }

    También podría gustarte