Cómo agregar estilos a la lista de productos en Angular

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Si ya tienes una cuenta,

Recursos

En el decorador de tu componente, verás la propiedad styleUrls donde se hace referencia a la hoja de estilos que el componente utiliza.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    ...
}

En este archivo puedes escribir todo el código CSS que tu componente necesita. Por ejemplo, si escogiste SCSS:

div {
    margin: 15px;
    h1 {
        font-family: Arial;
        font-size: 22px;
        font-weight: bold;
    }
    p {
        font-family: Arial;
        font-size: 18px;
        padding-bottom: 10px;
    }
}

Preprocesadores de CSS

Dependiendo el preprocesador que hayas elegido, tus hojas de estilos tendrán una extensión u otra. A excepción de .css si no escogiste utilizar un preprocesador.

TIP: Para escojer otro preprocesador, puedes realizar este cambio manualmente en el archivo ‘angular.json’ en la raíz de tu proyecto

Aporte creado por: Kevin Fiorentino.

Aportes 24

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Deymer Hernandez

hace 8 meses

Con esto va’:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Andrés López

hace 7 meses

Comparto mi código, cualquier retro alimentación es bienvenida.

//Tablets
@media screen and (min-width: 40em) {
  .products--grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
//Desktop
  @media screen and (min-width: 62em) {
    .products--grid{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 15px;
      }
  }

Julian Henao Henao

hace 7 meses

Comparto mi código de css con sass para quienes al inicio eligieron sass en lugar de scss.

.box
    height: 200px
    width: 200px
    overflow: auto
    background: red

.product--grid
    display: flex
    flex-direction: column
    div 
        img
            width: 100%
            border-radius: 10px
        h2, p
            margin: 0

@media (min-width: 30em) and (max-width: 40em)
    .product--grid
        display: grid
        grid-template-columns: repeat(4, 1fr)
        grid-gap: 15px

@media screen and (min-width: 40em)
    .product--grid
        display: grid
        grid-template-columns: repeat(5, 1fr)
        grid-gap: 15px

Jhon Carlos Acevedo Mendoza

hace 2 meses

//ESTILOS PARA LISTA DE PRODUCTOS
.products--grid {
  display: flex;
  flex-direction: column;
  div {
    img {
      width: 100%;
      border-radius: 10px;
    }
    h2, p {
      margin: 0;
    }
  }
}
//crear mediaquery para tablet con 4 columnas
@media screen and (min-width: 768px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}
@media screen and (min-width: 992px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

jesus sebastian gomez pedreros

hace 2 meses

si al inicio lo crearon con css como yo jajajaj con este comando pueden mudar todod a scss
ng add schematics-scss-migrate
desde la ruta del proyecto

diego_uribe

hace 8 meses

@media (max-width:768px) {
  .products--grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 15px;
  }
}

@media screen and (min-width:769px){
  .products--grid{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 15px;
  }
}

Juan Carlos Ortiz Romero

hace 7 meses

.box
    height: 200px
    width: 200px
    overflow: auto
    background: red

.product--grid
    display: flex
    flex-direction: column
    div 
        img
            width: 100%
            border-radius: 10px
        h2, p
            margin: 0

@media (min-width: 30em) and (max-width: 40em)
    .product--grid
        display: grid
        grid-template-columns: repeat(4, 1fr)
        grid-gap: 15px

@media screen and (min-width: 40em)
    .product--grid
        display: grid
        grid-template-columns: repeat(5, 1fr)
        grid-gap: 15px

George Bryant Gutiérrez Gastélum

hace 6 meses

Así quedó el .scss, en ese orden. Primero mobile, despues tablet y al ultimo desktop para que tome los estilos correctamente.

// Mobile
.products--grid {
    display: flex;
    flex-direction: column;    

    div {
        img {
            width: 100%;
            border-radius: 10px;
        }
        h2, p {
            margin: 0;
        }
    }
}
// Tablet
@media screen and (min-width: 30em) {
    .products--grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
    }
}

//Desktop
// No es necesario poner el display de nuevo ni el gap por los hereda del otro.
@media screen and (min-width: 40em) {
    .products--grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

Fernando Molano Castrillón

hace 13 días

No hay necesidad de usar media queries cuando puedes modificar tus propiedades de flex o grid.
Adicional, agregué un height a las imágenes y un object-fit: cover para que todas queden igual visualmente.

.products--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  div {
    img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 10px;
    }
    h2,
    p {
      margin: 0;
    }
  }
}

Edixon javier Pabon Lizcano

hace un mes

Angular es Genial 😃

Jose Rogelio Nieto Prada

hace 2 meses

//SCSS

.box {
  height: 200px;
  width: 200px;
  overflow: auto;
  background: rgb(110, 63, 63);
}

//
hr {
  background-color: red;
  height: 10px;
}

h1 {
  color: blue;
}

.productGrid {
  background-color: rgb(240, 216, 216);
  display: flex;
  flex-direction: column;
  div {
    img {
      width: 100%;
      border-radius: 10px;
      box-shadow: 7px 6px 13px -5px rgba(0, 0, 0, 0.75);
      -webkit-box-shadow: 7px 6px 13px -5px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 7px 6px 13px -5px rgba(0, 0, 0, 0.75);
    }
    h2 {
      margin: 0;
      font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    }
    p {
      color: rgb(114, 106, 106);
      font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
      margin-top: 0;
    }
  }
}

@media screen and (min-width: 768px) {
  .productGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

@media screen and (min-width: 992px) {
  .productGrid {
    grid-template-columns: repeat(5, 1fr);
  }
}

Rodrigo Leyva

hace 2 meses

Comparto mi código.

{
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
font-size: 62.5%;
}

.box {
height: 11.25rem;
width: 11.25rem;
overflow: auto;
background: red;
}
.products–grid {
display: flex;
flex-direction: column;
div {
img {
width: 100%;
border-radius: 10px;
}
h2, p {
margin: 0;
}
}
}

//* Tablet *//
@media screen and (min-width: 30rem) {
.products–grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 15px;
}
}

//* Desktop *//
@media screen and (min-width: 48rem) {
.products–grid {
grid-template-columns: repeat(5, 1fr);
}
}

Alba Montilva

hace 2 meses

Estoy usando css y quedó algo así

Angel Hernandez

hace 3 meses

Algo asi quedaria

        // ! 40em es la medida estandar para tablets en adelante

@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}


    // ! 1024px para pantallas desktop

@media screen and (min-width: 1024px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

Katherine Peña

hace 3 meses

de esta forma me resulto en scss:

<h1>*ngFor Objs</h1>
<div class="products--grid" [style.grid-template-columns]="'repeat(5,  1fr)'">
  <div *ngFor="let product of products">
      <img width="250" [src]="product.image" alt="image">
      <h2> {{ product.price}} </h2>
      <p> {{ product.name}} </p>    
  </div>    
</div>

Johnny Stefan Ordoñez Mazurek

hace 4 meses

Así ajuste mi CSS para tablets y desktop

@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

@media screen and (min-width: 1024px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

Super team

hace 8 meses

El reto:
Lo hice con el mismo formato que se realizó en la clase, solo que a este @media le asigné un maximo
y un minimo de width para que se mostraran 4 imagenes.
Ya que desde 0em a 30em será considerado con el .products–grid de mobiles.
De 30em a 40em se mostrarán 4 imagenes y de 40 para arriba lo tomará el display de 5 imagenes.

@media (min-width: 30em) and (max-width: 40em){
    .products--grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 15px; 
	}
}

Esto se agregó debajo del @media ya hecho en clases.

Yeiner Morales

hace 4 meses

Tablets y desktop

//Tablets
@media screen and (min-width: 40em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

//Desktop
@media screen and (min-width: 64em) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

Paula Vargas

hace 6 meses

<code> 
.products--grid{
  display: flex;
  flex-direction: column;
  div{
    img{
      width:100%;
      border-radius:10px;
    }
    h2,p{
      margin: 0;
    }
  }
}
//table
@media screen and (min-width: 30em) {
  .products--grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 15px;
  }
}
//Desktop
@media screen and (min-width: 62em) {
  .products--grid{
    grid-template-columns: repeat(5,1fr);
  }
}

Juan Carlos Ortiz Romero

hace 7 meses

@media (min-width: 30em) and (max-width: 40em){
    .products--grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 15px; 
	}
}

Edinson Colonia Paez

hace 7 meses

Este sin duda es el mejor de los cursos, FELICITACIONES. Absorbiendo conocimiento Nicolas!

Eliseo Ávila

hace 7 meses

// 3 Columnas para Tablet
@media screen and (min-width: 768px) {
    .products--grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

// 5 Columnas para Desktop
@media screen and (min-width: 992px) {
    .products--grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
}

Marco Bolaños

hace 7 meses

Modifiqué tanto para Tablets como para Laptops hacia arriba:

// Tablets
@media screen and (min-width: 768px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
}

// Laptops hacia arriba
@media screen and (min-width: 1024px) {
  .products--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
  }
}

Harold Gama

hace 7 meses

<code> 
.products-grid {
                    display: flex;
                    flex-direction: column;
                    app-product {
                        img {
                            width: 100%;
                            border-radius: 10px;
                        }
                        h2,
                        p {
                            margin: 0;
                        }
                    }
                }

                @media (min-width: 26em) {
                    .products-grid {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        grid-gap: 15px;
                    }
                }

                @media (min-width: 37em) {
                    .products-grid {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        grid-gap: 15px;
                    }
                }

                @media (min-width: 64em) {
                    .products-grid {
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        grid-gap: 15px;
                    }
                }

Si ya tienes una cuenta,

Curso de Fundamentos de Angular

Estilos a la lista de productos

Preprocesadores de CSS