Agregando iconos al formulario de preguntas

Clase 23 de 75 • Curso de MEAN 2017

Alejandro Oñate

student•

quizás era mas simple agregar una condición para illustrator

    getIconVersion(icon : any){
        let version;
        if(icon.versions.font.includes('plain-wordmark')){
            version = 'plain-wordmark'
        }else{
            version = icon.versions.font[0];
        }

        if(icon.name=='illustrator'){
            version = icon.versions.svg[0];
        }
        return version;
    }```

Joshua Michael Rodriguez

student•

Si. Por algún motivo el *ngIf no me estaba quitando el icono. Asi que también opte por esta opción. Buen aporte!

Carlos Enrique Ramírez Flores

student•

gracias, es una buena solucion.

Federico Ramato

student•

En un momento pensé que estaba en el día de la marmota.

Marcelo Lavizzari

student•

jaja, muy buen comentario, a mi me paso lo mismo, también me iba a comenzar a escribir en los brazos como memento.

Carlos Enrique Ramírez Flores

student•

va todo bien 16/01/2018

Alonso Alejandro Zúñiga Beltrán

student•

A partir de Devicon v2.1 ya funciona el de illustrator por lo que ya todo ese proceso para omitirlo no es necesario y efectivamente, sigue duplicado…

Isar Ramses Cadena Gaona

student•

solo dijeron que lo revisarían, no que lo corregirían :v

Romina Soledad Barros

student•

En este video hizo un loop bastante importante Sacha, tendrian que reveer el mismo porque llega un momento que confunde

Oscar Barajas Tavares

Team Platzi•

Repasar las clases donde tengas alguna confusión permite entender mejor.

José Rodríguez

student•

Saludos, esta clase posee una parte repetida.

Diego Forero

Team Platzi•

Gracias por el reporte, lo vamos a revisar.

Wilmer Maldonado

student•

Se repite demasiadas veces xd

JAIME URQUIZU

student•

Tengo este problema… y por más que intento no encuentro la solución. Necesito ayuda!

Me sale este error cuando inspecciono:

compiler.js:215 Uncaught Error: Template parse errors:
Can’t bind to ‘ngFor’ since it isn’t a known property of ‘mat-grid-tile’.

If ‘mat-grid-tile’ is an Angular component and it has ‘ngFor’ input, then verify that it is part of this module.
If ‘mat-grid-tile’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("
</mat-form-field>
<mat-grid-list cols=“3” rowHeight=“3:2”>
<mat-grid-tile [ERROR ->]*ngFor=“icon of icons”>
<i mat-list-icon class=“devicon-{{ }}-{{ getIconVersion(icon”): ng:///AppModule/QuestionFormComponent.html@16:19
Property binding ngFor not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the “@NgModule.declarations”. ("
</mat-form-field>
<mat-grid-list cols=“3” rowHeight=“3:2”>
[ERROR ->]<mat-grid-tile *ngFor=“icon of icons”>
<i mat-list-icon class=“devicon-{{ }}-{{ getI”): ng:///AppModule/QuestionFormComponent.html@16:4
at syntaxError (compiler.js:215)
at TemplateParser.push…/node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
at compiler.js:22639
at Set.forEach (<anonymous>)
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
at compiler.js:22549
at Object.then (compiler.js:206)
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

ESTOS son los dos ficheros:

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

@Component ({
  selector: 'app-question-form',
  templateUrl: './question-form.component.html'
})

export class QuestionFormComponent {
  icons: Object[] = icons;

  getIconVersion(icon: any) {
    let version;
    if (icon.versions.font.includes('plain-wordmark')) {
      version = 'plain-wordmark';
    } else {
      version = icon.versions.font[0];
    }
    return version;
  }

  onSubmit(form: NgForm) {
    const q = new Question(
    form.value.title,
    form.value.description
    );
    console.log(q);
  }
}```

<form (ngSubmit)=“onSubmit(formulario)” #formulario=‘ngForm’> <mat-form-field> <input matInput placeholder="Título" name="title" ngModel> </mat-form-field> <mat-form-field> <input matInput placeholder="Descripción" name="description" ngModel> </mat-form-field> <mat-grid-list cols=“3” rowHeight=“3:2”> <mat-grid-tile \*ngFor=“icon of icons”> <i mat-list-icon class=“devicon-{{ }}-{{ getIconVersion(icon) }}”></i> </mat-grid-tile> </mat-grid-list> <button type=“submit” mat-raised-button color=“accent”>Enviar</button> </form>

JAIME URQUIZU

student•

Vaya… había que poner let dentro de ngFor y he leído por aquí que no… pues ese era el error…

Jose Osses Plaza

student•

holaaa lala una consulta , no puedo agregar listads de iconos

    <mat-grid-list cols="3" rowHeight="3:2">
            <mat-grid-tile
            *ngFor="let icon of icons">
           

            
          
        </mat-grid-tile>

    </mat-grid-list>

      <button type="submit" mat-raised-button color="accent">Enviar</button>   ```

u.u intente de muchas formas y no me resulto si alguien me da una manito porfavor estae muy agradecido las listas como que me complicaron desde ya gracias , igual que e visto que algunos tienen

getIconVersion(icon:any){
let version;
if (icon.version.font.includes(‘plain-wordmark’)){
version= ‘plain-wordmark’;
}else{
version= icon.version.font[0];
}
return version;
}```

versions y version cuando dejan solo un let version … no estoy muy seguro de eso … desde ya Gracias

Diego Forero

Team Platzi•

Primero no necesitas definir let dentro del ngFor, segundo, no tienes ningún elemento donde estés mostrando el icono, en la clase Sacha usa un i dentro del grid-tile.

Jose Osses Plaza

student•

esto es lo que me aparece sigue no apareciendo nada 😒

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
    <mat-form-field>
      <input matInput 
      placeholder="Titulo" 
      name="title"
      ngModel>
    </mat-form-field>
    <mat-form-field>
      <input matInput 
      placeholder="Descripcion" 
      name="description"
      ngModel>
    </mat-form-field>

    <mat-grid-list cols="3" rowHeight="3:2">
            <mat-grid-tile *ngFor="let icon of icons">
              <i mat-list-icon class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}"></i>

        </mat-grid-tile>

    </mat-grid-list>

      <button type="submit" mat-raised-button color="accent">Enviar</button>
</form>```

Yadiel Vélez

student•

Con la versión 2.2 no hay que hacer lo de illustrator. También, le añadí la class ‘colored’ para que aparezca el logo con color.

<mat-grid-tile *ngFor="let icon of icons">
            <i  mat-list-icon class=" devicon devicon-{{icon.name}}-{{getIconVersion(icon)}} colored"></i>
</mat-grid-tile>```

Walter Lensinas

student•

Buenas tardes, paso el código de la clase:

Martes 22/01/2019

Luis Abdel Rangel Castro

student•

    getIconVersion(icon : any){
        let version;
        if(icon.versions.font.includes('plain-wordmark')){
            version = 'plain-wordmark'
        }else{
            version = icon.versions.font[0];
        }

        if(icon.name=='illustrator'){
            version = icon.versions.svg[0];
        }
        return version;
    }```

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

@Component ({
  selector: 'app-question-form',
  templateUrl: './question-form.component.html'
})

export class QuestionFormComponent {
  icons: Object[] = icons;

  getIconVersion(icon: any) {
    let version;
    if (icon.versions.font.includes('plain-wordmark')) {
      version = 'plain-wordmark';
    } else {
      version = icon.versions.font[0];
    }
    return version;
  }

  onSubmit(form: NgForm) {
    const q = new Question(
    form.value.title,
    form.value.description
    );
    console.log(q);
  }
}```

    <mat-grid-list cols="3" rowHeight="3:2">
            <mat-grid-tile
            *ngFor="let icon of icons">
           
        </mat-grid-tile>

    </mat-grid-list>

      <button type="submit" mat-raised-button color="accent">Enviar</button>   ```

u.u intente de muchas formas y no me resulto si alguien me da una manito porfavor estae muy agradecido las listas como que me complicaron desde ya gracias , igual que e visto que algunos tienen

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
    <mat-form-field>
      <input matInput 
      placeholder="Titulo" 
      name="title"
      ngModel>
    </mat-form-field>
    <mat-form-field>
      <input matInput 
      placeholder="Descripcion" 
      name="description"
      ngModel>
    </mat-form-field>

    <mat-grid-list cols="3" rowHeight="3:2">
            <mat-grid-tile *ngFor="let icon of icons">
              <i mat-list-icon class="devicon-{{ icon.name }}-{{ getIconVersion(icon) }}"></i>

        </mat-grid-tile>

    </mat-grid-list>

      <button type="submit" mat-raised-button color="accent">Enviar</button>
</form>```

Agregando iconos al formulario 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

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más