Estilo en la pantalla de detalle de una pregunta

Clase 9 de 75 • Curso de MEAN 2017

Juan C Felizzola

student•

Para usar las card en Material Angular ahora es:

<mat-card></mat-card>

Y no

<md-card></md-card>

Así mismo, todas las etiquetas de card.

En la documentación pueden consultar más.

Sebastián Torrealba

student•

Yo todo lo que empieza por md en el curso lo remplazo por mat y me funciona de maravilla.

Juan C Felizzola

student•

Así es. En la documentación todo aparece como mat

Mike Nieva

teacher•

Todo bien. Seguimos avanzando.

Nestor Andres Rodriguez

student•

Lo bueno de estos cursos es que todos podemos participar y actualizarnos entre nosotros mismos

Herdic Asmeth Diaz Munevar

student•

hay vamos.

Aster Eduardo Cajares Garces

student•

con la nueva funcionalidad de angular, el ejercicio es el sgte. abril 2018

<code><mat-card>
  <mat-card-header>
    <div mat-card-avatar>
      <mat-icon class="{{question.icon}} icon"></mat-icon>
    </div>
    <mat-card-title>
      <h2>{{question.title}}</h2>
    </mat-card-title>
      <mat-card-subtitle>
        <small>Aster Cajares -{{question.createdAt}}</small>
      </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{question.description}}</p>
  </mat-card-content>
</mat-card>

HILARIO GUZMAN PUMA

student•

Amí me funciona con esto:

<mat-card>
  <mat-card-header>
    <div mat-card-avatar>
      <i mat-list-icon class="{{ question.icon }}" icon></i>
    </div>
    <mat-card-title>
      <h2>{{question.title}}</h2>
    </mat-card-title>
    <mat-card-subtitle>
      <small>Hilario Guzman - {{question.createdAt}}</small>
    </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{question.description}}</p>
  </mat-card-content>
</mat-card>```

HILARIO GUZMAN PUMA

student•

En material.modules.ts
import {MatCardModule} from ‘@angular/material/card’;

import { NgModule } from '@angular/core';
import {
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';
import {MatCardModule} from '@angular/material/card';

const modules = [
  MatToolbarModule,
  MatIconModule,
  MatCardModule
];
@NgModule({
    imports: modules,
    exports: modules
})
export class MaterialModule {}```

Carlos Enrique Ramírez Flores

student•

Carlos Enrique Ramírez Flores

student•

.ts

<mat-card>
    <mat-card-header>
      <div mat-card-avatar class="card-header-image"><i class="{{question.icon}} c-blue"></i></div>
      <mat-card-title>{{question.title}}</mat-card-title>
      <mat-card-subtitle>{{question.createdAt}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>
        {{question.description}}
      </p>
    </mat-card-content>
  </mat-card> ```

Walter Lensinas

student•

Código de la clase:

Alexander Valencia

student•

<mat-card></mat-card>

Jorge Leonardo Céspedes Tapia

student•

Me salió todo perfecto, excepto por el color de fondo. A Sacha le sale blanco y a mi oscuro. ¿Cómo lo cambio?

Jose Osses Plaza

student•

holaaa , estoy usando la ultima version de angular y material supongo pero tengo un problema al definir los estilos tanto en la forma global cuando en la carpet style.css del main pego

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

no me lo reconoce y tambien cuando ahora en este video tuve que crear C:\Users\José Osses Plaza\platzi-overflow\src\app\question\question-detail.component.css
no me lo toma en el icon ni en el h2 … alguien podria aconsejarme sobre mi problema porque no me esta quedando tan lindo que digamos xD pero voy entiendo

Dave Chávarri

student•

En el HTML del componente no hay ninguna etiqueta H2 solo hay mat-card-title, pero en la hoja de estilos los estilos los pone a la etiqueta h2 y la información dentro de la etiqueta mat-card-title se ve afectada. Son equivalentes?

SocialLink Organizaciones Visibles

student•

Deberías tener algo así en tu card:

<mat-card-title>
	<h2>{{ question.title }}</h2>
</mat-card-title>

Ahora, que si quitas el h2 te evitas el tener que mover el margin en el CSS y se sigue viendo bien

<code><mat-card>
  <mat-card-header>
    <div mat-card-avatar>
      <mat-icon class="{{question.icon}} icon"></mat-icon>
    </div>
    <mat-card-title>
      <h2>{{question.title}}</h2>
    </mat-card-title>
      <mat-card-subtitle>
        <small>Aster Cajares -{{question.createdAt}}</small>
      </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{question.description}}</p>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-header>
    <div mat-card-avatar>
      <i mat-list-icon class="{{ question.icon }}" icon></i>
    </div>
    <mat-card-title>
      <h2>{{question.title}}</h2>
    </mat-card-title>
    <mat-card-subtitle>
      <small>Hilario Guzman - {{question.createdAt}}</small>
    </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{question.description}}</p>
  </mat-card-content>
</mat-card>```

import { NgModule } from '@angular/core';
import {
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';
import {MatCardModule} from '@angular/material/card';

const modules = [
  MatToolbarModule,
  MatIconModule,
  MatCardModule
];
@NgModule({
    imports: modules,
    exports: modules
})
export class MaterialModule {}```

<mat-card>
    <mat-card-header>
      <div mat-card-avatar class="card-header-image"><i class="{{question.icon}} c-blue"></i></div>
      <mat-card-title>{{question.title}}</mat-card-title>
      <mat-card-subtitle>{{question.createdAt}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>
        {{question.description}}
      </p>
    </mat-card-content>
  </mat-card> ```