Creando el componente para los listados de preguntas

Clase 20 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Tomar examen

Resumen

Importante:

-md-list es un componente de contenedor que ajusta una serie de artículos o datos en forma de lista. Como componente de la lista base, proporciona estilos de Material Design, pero no un comportamiento propio.

Comentarios

Jose Augusto Bernaola Gaspar

student•

Actualizando a Angular 6

<mat-list role="list">
  <mat-list-item *ngFor="let question of questions">
    <mat-icon *ngIf="question.icon === 'none'" mat-list-icon class="material-icons help">help</mat-icon>
    <mat-icon *ngIf="question.icon !== 'none'" mat-list-icon class="{{ question.icon }}"></mat-icon>
    <h3 mat-line>{{question.title}}</h3>
    <p mat-line>
      <small>{{question.answers.length}} repuestas - {{question.createdAt | amLocale: 'es' | amTimeAgo}}</small>
    </p>
  </mat-list-item>
</mat-list>

import { Component } from '@angular/core';
import { Question } from './question.model';

const q = new Question(
    '¿Como reutilizo un componente',
    'Mire, esta en mi pregunta ...',
    new Date(),
    'none'
)

@Component({
  selector: 'app-question-list',
  templateUrl: './question-list.component.html'
  styles: [`
      mat.icon {
        font-size: 48px;
      }
      
      mat-icon.help {
        width 48px !important;
        height: 48px !important;
        padding: 0 !important;
        font-size: 48px !important;
      }
    `]
})

export class QuestionListComponent {
  questions: Question[] = new Array(10).fill(q);
}

Luis Abdel Rangel Castro

student•

Buen aporte!

Luis Abdel Rangel Castro

student•

<mat-list>
    <mat-list-item *ngFor="let question of questions">
        <mat-icon *ngIf="question.icon === 'none'" mat-list-icon class="material-icons help">help</mat-icon>
        <mat-icon *ngIf="question.icon !== 'none'" mat-list-icon>
                <i class="{{question.icon}}"></i>
        </mat-icon>
        <h3 mat-line>{{question.title}}</h3>
        <p><small>{{question.answers.length}} respuestas - {{question.createdAt | amLocale: 'es' | amTimeAgo }}</small>
        </p>
    </mat-list-item>
</mat-list>

Wilson Fabian Pérez Sucuzhañay

student•

para los que les guste utilizar menos líneas de código aquí una solución para no poner doble linea de if

<mat-icon mat-list-icon >
      {{question.icon === 'none' ? 'help' : question.icon}}
    </mat-icon>

Elvis W. Vásquez

student•

A que se refiere con “pisar” los estilos?

Emerson Cedeño

student•

refiriéndose a reglas en CSS, y dado que las reglas que se definen en él se leen “en cascada” (como su nombre lo indica), “pisar los estilos” es una forma de referirse al hecho de que una regla reemplace a otra previamente definida para lograr un cometido, por ejemplo, supongamos que tenemos el siguiente fragmento de código:

<style>
.textoColor { color: blue; }
.fondo { background-color: black; }
.textoColor { color: white; }
</style>

<div class="fondo textoColor">Prueba</div>

En en el ejemplo, el texto saldrá en color blanco (white) a pesar de que al principio se definió como en azul (blue), dado que la regla en cuestión, textoColor, fue “pisada” posteriormente.

Sergio Zapata Donado

student•

A mi los iconos me quedaron a la derecha…

<mat-list>
  <mat-list-item *ngFor="let question of questions">
    <i *ngIf="question.icon === 'none' mat-list-icon" class="material-icons help">help</i>
    <i *ngIf="question.icon !== 'none' mat-list-icon" class="{{ question.icon }}"></i>
    <h3 mat-line>{{ question.title }}</h3>
    <p mat-line><small>{{ question.answers.length }} respuestas - 
      {{ question.createdAt | amLocale: 'es' | amTimeAgo }}</small></p>
  </mat-list-item>
</mat-list>

Marifer Villarroel

student•

Hola, tienes un pequeño error en tu codigo, en la parte del titulo y la cantidad de respuestas.
Me refiero a este:

<h3mat-line>

y a este:

<pmat-line><small>

Sergio Zapata Donado

student•

Saludos, esto solo sucede cuando pasé el código a el cuerpo del mensaje de acá (Usualmente ocurre) en mi codigo original en mi pc esta todo bien separado.

<mat-list role="list">
  <mat-list-item *ngFor="let question of questions">
    <mat-icon *ngIf="question.icon === 'none'" mat-list-icon class="material-icons help">help</mat-icon>
    <mat-icon *ngIf="question.icon !== 'none'" mat-list-icon class="{{ question.icon }}"></mat-icon>
    <h3 mat-line>{{question.title}}</h3>
    <p mat-line>
      <small>{{question.answers.length}} repuestas - {{question.createdAt | amLocale: 'es' | amTimeAgo}}</small>
    </p>
  </mat-list-item>
</mat-list>

import { Component } from '@angular/core';
import { Question } from './question.model';

const q = new Question(
    '¿Como reutilizo un componente',
    'Mire, esta en mi pregunta ...',
    new Date(),
    'none'
)

@Component({
  selector: 'app-question-list',
  templateUrl: './question-list.component.html'
  styles: [`
      mat.icon {
        font-size: 48px;
      }
      
      mat-icon.help {
        width 48px !important;
        height: 48px !important;
        padding: 0 !important;
        font-size: 48px !important;
      }
    `]
})

export class QuestionListComponent {
  questions: Question[] = new Array(10).fill(q);
}

<mat-list>
    <mat-list-item *ngFor="let question of questions">
        <mat-icon *ngIf="question.icon === 'none'" mat-list-icon class="material-icons help">help</mat-icon>
        <mat-icon *ngIf="question.icon !== 'none'" mat-list-icon>
                <i class="{{question.icon}}"></i>
        </mat-icon>
        <h3 mat-line>{{question.title}}</h3>
        <p><small>{{question.answers.length}} respuestas - {{question.createdAt | amLocale: 'es' | amTimeAgo }}</small>
        </p>
    </mat-list-item>
</mat-list>

<mat-list>
  <mat-list-item *ngFor="let question of questions">
    <i *ngIf="question.icon === 'none' mat-list-icon" class="material-icons help">help</i>
    <i *ngIf="question.icon !== 'none' mat-list-icon" class="{{ question.icon }}"></i>
    <h3 mat-line>{{ question.title }}</h3>
    <p mat-line><small>{{ question.answers.length }} respuestas - 
      {{ question.createdAt | amLocale: 'es' | amTimeAgo }}</small></p>
  </mat-list-item>
</mat-list>

Creando el componente para los listados de preguntas

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas