Introducci贸n a Angular y Fundamentos

1

Creando tu primer proyecto en Angular

2

Implementando estilos

3

Mostrando elementos

4

Property Binding en Angular

5

Event Binding: click y doble click

6

Event binding: keydown

7

Modelo de reactividad con Signals

8

Creando un Signal en Angular

Estructuras de control en Angular

9

Directivas de control

10

Uso de ngFor

11

ngFor para objetos

12

Update Tasks

13

Uso de ngIf

14

Uso de ngSwitch y ngSwitchDefault

15

Controlando un input

16

Manejo de formularios en Angular

Alistando tu aplicaci贸n para producci贸n

17

Estilos al modo Angular

18

Clases en Angular

19

Editing mode

20

Estados compuestos con computed

21

Usando effect para localStorage

22

Uso de ngbuild

23

Despliegue con Firebase Hosting

24

Nueva sintaxis en Angular

25

Directivas @For, @switch

26

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicaci贸n

27

Construyendo un e-commerce en Angular

28

Componentes en Angular

29

Mostrando los componentes

30

Angular DevTools

31

Uso de Inputs en Angular

32

Uso de Outputs en Angular

33

Componentes para Producto

Ciclo de vida de los componentes

34

Ciclo de vida de componentes

35

Ciclo de vida de componentes: ngOnChanges

36

Ciclo de vida de componentes: ngOnInit

37

Detectando cambios en los inputs

38

Evitando memory leaks con ngDestroy

39

Audio player con ngAfterViewInit

40

Creando la p谩gina "about us" o "con贸cenos"

Mejorando la interfaz del producto

41

Creando componente de productos

42

Creando el Header

43

Creando el carrito de compras

44

Comunicaci贸n padre e hijo

45

Calculando el total con ngOnChanges

46

El problema del prop drilling

47

Reactividad con signals en servicios

48

Entendiendo la inyecci贸n de dependencias

Integraci贸n y Datos

49

Obteniendo datos una REST API

50

Importaciones cortas en Typescript

51

Pipes en Angular

52

Construyendo tu propio pipe

53

Utilizando librer铆as de JavaScript en Angular

54

Conociendo las directivas

55

Deployando un proyecto en Vercel

Enrutamiento y Navegaci贸n

56

Ruta 404

57

Uso del RouterLink

58

Vistas anidadas

59

Uso del RouterLinkActive

60

Detalle de cada producto

61

Obteniendo datos del producto

62

Galer铆a de imagenes

63

Detalle de la galer铆a

Perfeccionando tu e-commerce

64

Mostrando categorias desde la API

65

Url Params

66

LazyLoading y Code Splitting

67

Aplicando LazyLoading

68

Prefetching

69

Usando la nueva sintaxis de Angular 17

70

Lanzando tu aplicaci贸n a producci贸n

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

4 D铆as
17 Hrs
27 Min
35 Seg

Implementando estilos

2/70
Recursos
Transcripci贸n

Aportes 28

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Aqui encontraras el CSS <https://gist.github.com/nicobytes/ba2252b0b5ac2cbdafc40c0accd24862> 馃槉

Para encontrar los estilos y el html, lo puedes encontrar en la rama step-2 del repositorio.

Una sintaxis m谩s corta para generar tus componentes seria con el siguiente comando

ng g c pages/home
me suelta este warning: "The `\*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported. Use Angular's built-in control flow @for or make sure that either the `NgFor` directive or the `CommonModule` is included in the `@Component.imports` array of this component.". basicamente me pide usar la nueva sintaxis y la lista tampoco se renderiza ;(, en el app.component si funcionaba.
Si usan el comando `ng g c components/form --dry-run` con el flag --dry-run te ejecuta el comando pero no crea el componente. Es 煤til cuando quieres verificar que la ruta donde se va a crear el componente sea correcta
Prefer铆 instalarle tailwind, porque me agiliza mucho el hacer los estilos
Para los que les marca el siguiente error de 'router-outlet': `'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is included in the '@Component.imports' of this component. 2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.` solo tienen que agregar lo sig: labs.component.ts ```ts import { RouterModule } from '@angular/router'; @Component({ selector: 'app-labs', standalone: true, imports: [RouterModule, CommonModule], templateUrl: './labs.component.html', styleUrl: './labs.component.css' }) ```
Cuando accedo a la URL del home o de labs , no esta cargando la pagina , carga el html que viene por defecto , a alguien mas le sucede me podrian ayudar por favor

ac谩 esta el css del home

.container {
    min-width: 230px;
    max-width: 550px;
    margin: 0 auto;
  }
  
  .header {
    background-image: linear-gradient(
      224deg,
      hsl(240deg 100% 50%) 2%,
      hsl(249deg 100% 59%) 63%,
      hsl(252deg 99% 64%) 78%,
      hsl(253deg 98% 68%) 87%,
      hsl(254deg 96% 73%) 92%,
      hsl(253deg 93% 77%) 96%,
      hsl(251deg 89% 81%) 98%,
      hsl(246deg 81% 85%) 99%,
      hsl(232deg 68% 88%) 100%,
      hsl(200deg 53% 90%) 100%
    );
    padding-bottom: 4rem;
  }
  
  .hidden {
    display: none;
  }
  
  .todoapp-wrapper {
    position: relative;
    top: -40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .todoapp input::-webkit-input-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .todoapp input::-moz-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .todoapp input::input-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .header h1 {
    width: 100%;
    font-size: 3rem;
    font-weight: 200;
    color: white;
    padding-top: 2rem;
    margin: 0;
  }
  
  .header h1 + p {
    margin: 0;
    color: white;
    padding-bottom: 1.2rem;
  }
  
  .new-todo,
  .edit {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    color: inherit;
    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .new-todo {
    padding: 2rem;
    height: 65px;
    border: none;
    background: white;
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
  }
  
  .main {
    position: relative;
    z-index: 2;
    border-top: 1px solid #e6e6e6;
  }
  
  .toggle-all {
    width: 1px;
    height: 1px;
    border: none;
    /* Mobile Safari */
    opacity: 0;
    position: absolute;
    right: 100%;
    bottom: 100%;
  }
  
  .toggle-all + label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 65px;
    font-size: 0;
    position: absolute;
    top: -65px;
    left: -0;
  }
  
  .toggle-all + label:before {
    content: "鉂";
    display: inline-block;
    font-size: 22px;
    color: #949494;
    padding: 10px 27px 10px 27px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .toggle-all:checked + label:before {
    color: #484848;
  }
  
  .todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
    padding: 0rem 1rem;
  }
  
  .todo-list li:last-child {
    border-bottom: none;
  }
  
  .todo-list li.editing {
    border-bottom: none;
    padding: 0;
  }
  
  .todo-list li.editing .edit {
    display: block;
    width: calc(100% - 4rem);
    padding: 12px 16px;
    margin: 0 0 0 4rem;
  }
  
  .todo-list li.editing .view {
    display: none;
  }
  
  .todo-list li .toggle {
    text-align: center;
    width: 40px;
    /* auto, since non-WebKit browsers doesn't support input styling */
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: none;
    /* Mobile Safari */
    -webkit-appearance: none;
    appearance: none;
  }
  
  .todo-list li .toggle {
    opacity: 0;
  }
  
  .todo-list li .toggle + label {
    /*
          Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
          IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
      */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center left;
  }
  
  .todo-list li .toggle:checked + label {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");
  }
  
  .todo-list li label {
    word-break: break-all;
    padding: 15px 15px 15px 60px;
    display: block;
    line-height: 1.2;
    transition: color 0.4s;
    font-weight: 400;
    color: #484848;
  }
  
  .todo-list li.completed label {
    color: #949494;
    text-decoration: line-through;
  }
  
  .todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    color: #949494;
    transition: color 0.2s ease-out;
  }
  
  .todo-list li .destroy:hover,
  .todo-list li .destroy:focus {
    color: #c18585;
  }
  
  .todo-list li .destroy:after {
    content: "脳";
    display: block;
    height: 100%;
    line-height: 1.1;
  }
  
  .todo-list li:hover .destroy {
    display: block;
  }
  
  .todo-list li .edit {
    display: none;
  }
  
  .todo-list li.editing:last-child {
    margin-bottom: -1px;
  }
  
  .footer {
    padding: 1rem 1.5rem;
    height: 20px;
    text-align: center;
    font-size: 15px;
    border-top: 1px solid #e6e6e6;
  }
  
  .todo-count {
    float: left;
    text-align: left;
  }
  
  .todo-count strong {
    font-weight: 300;
  }
  
  .filters {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 0;
    left: 0;
  }
  
  .filters li {
    display: inline;
  }
  
  .filters li a {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
  }
  
  .filters li a:hover {
    border-color: #6e49fe;
  }
  
  .filters li a.selected {
    border-color: #4c33b1;
  }
  
  .clear-completed,
  html .clear-completed:active {
    float: right;
    position: relative;
    line-height: 19px;
    text-decoration: none;
    cursor: pointer;
  }
  
  .clear-completed:hover {
    text-decoration: underline;
  }
  
  .info {
    margin: 65px auto 0;
    color: #4d4d4d;
    font-size: 11px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-align: center;
  }
  
  .info p {
    line-height: 1;
  }
  
  .info a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
  }
  
  .info a:hover {
    text-decoration: underline;
  }
  
  /*
      Hack to remove background from Mobile Safari.
      Can't use it globally since it destroys checkboxes in Firefox
  */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .toggle-all,
    .todo-list li .toggle {
      background: none;
    }
  
    .todo-list li .toggle {
      height: 40px;
    }
  }
  
  @media (max-width: 430px) {
    .footer {
      height: 50px;
    }
  
    .filters {
      bottom: 10px;
    }
  }

ac谩 esta el html del home

<section class="todoapp">
    <header class="header">
      <div class="container">
        <h1>My Day</h1>
        <p>All my tasks in one place</p>
        <input
          class="new-todo"
          placeholder="Type new todo"
          autofocus
          type="text"
        />
      </div>
    </header>
    <div class="container todoapp-wrapper">
      <!-- This section should be hidden by default and shown when there are todos -->
      <section class="main">
        <ul class="todo-list">
          <li class="completed">
            <div class="view">
              <input class="toggle" type="checkbox" checked />
              <label>Learn JavaScript</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Learn JavaScript" />
          </li>
          <li>
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>Buy a unicorn</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Buy a unicorn" />
          </li>
          <li class="editing">
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>Make dishes</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Make dishes" />
          </li>
        </ul>
      </section>
      <!-- This footer should be hidden by default and shown when there are todos -->
      <footer class="footer">
        <!-- This should be `0 items left` by default -->
        <span class="todo-count"><strong>0</strong> item left</span>
        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
          <li>
            <a routerLink="/" class="selected">All</a>
          </li>
          <li>
            <a routerLink="/pending">Pending</a>
          </li>
          <li>
            <a routerLink="/completed">Completed</a>
          </li>
        </ul>
        <!-- Hidden if no completed items are left 鈫 -->
        <button class="clear-completed">Clear completed</button>
      </footer>
    </div>
  </section>
ESTILOS: <https://gist.github.com/nicobytes/ba2252b0b5ac2cbdafc40c0accd24862>
Que pasa Platzi, los 3 servidores caidos?? ![]()
pues yo instale angular 17 hice el \*ngFor y me dio warning y no me cargo la lista: ![](https://static.platzi.com/media/user_upload/image-f4a908f0-63e4-4dd7-8928-539ec961d0f7.jpg)
Voy a dejar aqui el link del gist.github que deberia estar en los recursos mas no aparece para el que le pase igual que a mi [Angular Course 路 GitHub](https://gist.github.com/nicobytes/ba2252b0b5ac2cbdafc40c0accd24862)
Cuando compilaba en la web, en la vista de labs no me cargaba la lista, esto fue debido a que en labs.component.ts me faltaba a帽adir la siguiente l铆nea de c贸digo: *import* { CommonModule } *from* '@angular/common';
cursos turbo
necesito ayuda eso de ng g component page/home no me crea la carpeta y ando renegando mas de 1h, tengo creado todo menos ese paso que esta el HTML y el lab...
No me aparece el archivo app.routes.ts, veo un app-routing.module.ts no se si sea para lo mismo?? Help please 馃檹馃従 ![](https://static.platzi.com/media/user_upload/Screenshot%202024-02-13%20at%207.48.00%E2%80%AFp.m.-41a1d644-55ea-458b-b112-34661f6851ad.jpg)
La extensi贸n para que se vea el error cuando ponemos private a las variables y otras muchas funcionalidades de Angular: **Angular Language Service** \--

ac谩 les dejo el ccs usado en la clase

/* You can add global styles to this file, and also import other style files */
html,
body {
  margin: 0;
  padding: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Roboto", sans-serif;
  background: #f5f5f5;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

Estilos base 馃憞

https://gist.github.com/nicobytes/ba2252b0b5ac2cbdafc40c0accd24862
驴C贸mo puedo hacer para que al recargar se actualicen los cambios, as铆 como el profesor? Porque me toca andar ejecutando el comando.
Les recomiendo a los usuarios nuevos que vean la ayuda que tiene el mismo angular desde el cli usando la bandera --help por ejemplo: ```js $ng --help $ng g c --help $ng g s --help $ng serve --help $ng doc --help ```No tienen que aprender las opciones, simplemente revisar como se usan con la ayuda.
![](https://static.platzi.com/media/user_upload/image-9eb9bd24-9652-4a7a-9640-aa6b8f2858ac.jpg)
Que estilos de colores esta usando para visual studio code? Me gusta mas como se ve aqu铆 que en mi editor
por que cuando actualizo me sale la pagina en blanco en lugar del home??
es demasiado lenta la web

No se que paso que cuando estaba haciendo los pasos me salto esto, alguien sabe que hacer? ![](https://static.platzi.com/media/user_upload/image-d6ecc52f-4307-4f80-ab31-1a309476ced0.jpg)