Demo de Aplicación Angular para Gestión de Películas

Así quedaría el código con el reto

<h3>{{ title }}</h3>
<form *ngFor="let movie of movies">
  <h4>{{ movie.name }}</h4>
  <button
    type="button"
    [disabled]="movie.quantity <= 0"
    (click)="removeMovieQuantity(movie.name)"
  >
    -
  </button>
  {{ movie.quantity }}
  <button
    type="button"
    [disabled]="movie.quantity >= movie.available"
    (click)="addMovieQuantity(movie.name)"
  >
    +
  </button>
</form>

Waldir Leonardo Jesus Lopez Peve

Gracias :3

Sebastián Buitrago

Array con la informacion de las peliculas

[
            {
              name: "Avengers",
              available: 3,
              quantity: 0,
            },
            {
              name: "Terminator",
              available: 5,
              quantity: 0,
            },
          ]

Ricardo Mazuera

Gracias

Josue Cerron Tuesta

Gracias bro!

Rosa Isela Morquecho Nuñez

En el type Movie hay que cambiar el tipo de dato Number por number, ya que con el Number no se puede utilizar el operador += o -=.

César Palma

Personalmente prefiero la sintaxis de angular, react es una pesadilla visual

Elvis Saavedra

Se puede usar react con typescript, al igual vue tiene js y ts

Moisés Jahaziel Luna Chagollán

Yo vengo de React y pienso lo mismo a la inversa 😂

Miguel Angel Berrio Huamani

Mi solución al reto

App.component.html

<h3>{{title}}</h3>

<form *ngFor="let movie of movies">
  <h4>{{movie.name}}</h4>
  <img src="{{movie.url}}" width="100px" alt="" />
  <br />
  <button
    type="button"
    (click)="removeMovieQuantity(movie.name)"
    [disabled]="movie.quantity <= 0"
  >
    -
  </button>
  {{movie.quantity}}
  <button
    type="button"
    (click)="addMovieQuantity(movie.name)"
    [disabled]="movie.quantity >= movie.available"
  >
    +
  </button>
</form>

App.component.ts

import { Component } from "@angular/core";

type Movie = {
  name: String;
  available: Number;
  quantity: any;
  url: String;
};

type Movies = Array<Movie>;

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title: String = "Peliculas";
  movies: Movies = [
    {
      name: "Avengers",
      available: 3,
      quantity: 0,
      url: "https://dam.smashmexico.com.mx/wp-content/uploads/2018/04/24160210/lo-que-debes-recordar-avengers-infinity-war.jpg"
    },
    {
      name: "Terminator",
      available: 5,
      quantity: 0,
      url: "https://es.web.img3.acsta.net/pictures/16/02/12/15/14/218373.jpg",
    }
  ];

  addMovieQuantity(movieName) {
    const movieIndex = this.movies.findIndex(
      (movie) => movie.name === movieName
    );
    this.movies[movieIndex].quantity += 1);
  }

  removeMovieQuantity(movieName) {
    const movieIndex = this.movies.findIndex(
      (movie) => movie.name === movieName
    );
    this.movies[movieIndex].quantity -= 1;
  }
}

Julian David Alzate Cuervo

para los que actualmente no les funciona el código, añadir :any

(movieName: any)

Rodrigo Damián Martinez

la mejor respuesta, ya iban como 2h viendo el video y viendo en que parte del código le erre lpm

Wilmer Conde Gómez

Por fin, mil gracias!

Irving Juárez

Porque TypeScript es un lenguaje tipado?

TypeScript es un lenguaje tipado, pero es opcional. La razón por la cual Microsoft decidió hacerlo de esta forma, fue para evitar ciertos errores que pasaban muy frecuentemente con JavaScript, como el

undefined is not a function

Entonces, cuando el programador declara de manera explicita el tipo de dato de un elemento, estos errores son mas fáciles de detectar incluso desde el IDE

Paula Fernanda Silva Pinzón

Vengo de la ruta de Frontend con React.js y me surge una duda... aunque me quiera enfocar por ahora en React.js, debería saber TypeScript? es decir saber esto influye en algo para react?

Carlos Eduardo Gomez García

¡Hola! No, no influye para nada en React (aunque sí puedes usar React con TypeScript 👀), pero es opcional.

TypeScript es más para las personas a las que les gusta trabajar con lenguajes tipados y con JavaScript, digamos que es algo así como JavaScript, pero más estricto.

Esto es común verlo con personas que vienen de lenguajes como C# o Java, donde trabajas con tipos de datos, entonces ellos prefieren TypeScript, pero al final todo acaba compilándose a JavaScript, así que si ya estás cómoda usando JavaScript normalito con React y solo te quieres enfocar a React, pues continúa así :D

Eso sí, yo te invitaría a darle una mirada a TypeScript en algún momento, pero repito, no es obligatorio (para React) :D

Bryan Aranda

Pienso lo mismo que el compañero, por experiencia he visto que como en las universidades enseñan lenguajes como java o C, a las personas les llega a parecer una pesadilla JavaScript porque no toleran no poder especificar de que tipo es cada variable jaja, pero sin duda no es necesario TypeScript en React JS

Víctor Isaac Arias García

Angular se ve bastante complejo pero en lo personal me gusto su sintaxis por cierto aca dejo como quedaria el reto de los botones

<button
    type="button"
    (click)="removeMovieQuantity(movie.name)"
    [disabled]="movie.quantity <= 0"
  >
    -
  </button>
  {{ movie.quantity }}
  <button
    type="button"
    (click)="addMovieQuantity(movie.name)"
    [disabled]="movie.quantity >= movie.available"
  >
    +
  </button>

Anfernee Valera

Me gusta que Angular sea con typescript, but a la vez siento que se me complica más su sintaxis xD

Christian Alvarenga

¿Alguien sabe a qué se debe este error?

David Pedroza Segoviano

Sip, probablemente le pusiste como tipo Number a quantity, solo cámbiale el nombre a number y eso debería de resolverlo

Carlos Rubén Díaz Gutiérrez

Que pesadilla TypeScript, demasiada cosa. 😵‍💫

Jaime Ortiz

Qué diferencia hay entre "type" e "interface" de typescript?

//type
type Movie = {
  name: String,
  available: Number
}
interface Movie = {
  name: String,
  available: Number
}

Juan Castro

Profesor

Es muy poco confuso al principio, debo admitir.

Es algo así como la diferencia entre divs, sections y articles en HTML.

Yo personalmente te recomendaría usar type para funciones o métodos muy específicos, ya que es como crear tu propio tipo de dato.

El interface lo reservaría para definir la estructura de una clase y sus instancias, ya que es como un molde para que no se te olvide crear tus objeto-elementos con las reglas que necesites definir.

Este blogpost tiene una explicación más extendida: Types vs. interfaces in TypeScript.

Kevin Figuera

app.component.ts

import { Component } from "@angular/core";

type Movie = {
  name: string, 
  available: number,
  quantity: number, 
};
type Movies = Array<Movie>;
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title: String = "Películas";
  movies: Movies  = [
    {
      name: 'Avengers',
      available: 3,
      quantity: 0,
    },
    {
      name: 'Terminator',
      available: 5,
      quantity: 0,
      }
  ];

  addMovieQuantity(movieName){
    const movieIndex = this.movies.findIndex(
      movie => movie.name === movieName
    );
    this.movies[movieIndex].quantity += 1;
  }

  removeMovieQuantity(movieName){
    const movieIndex = this.movies.findIndex(
      movie => movie.name === movieName
    );
    this.movies[movieIndex].quantity -= 1;
  }


}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div>
  <h3>{{title}}</h3>

  <form *ngFor="let movie of movies">
    <h4>{{movie.name}}</h4>
    <button type="button" 
      (click)="removeMovieQuantity(movie.name)"
      [disabled]="movie.quantity <= 0"
      >-</button>
    {{ movie.quantity }}
    <button type="button" 
      (click)="addMovieQuantity(movie.name)"
      [disabled]="movie.quantity >= movie.available"
      >+</button>
  </form>
  
</div>

Cristian David Casallas Velandia

Me pareció mucho más complejo Angular ya veo porque su popularidad baja más y más cada vez...

Por otro lado aquí está el reto solucionado:

<h3>{{title}}</h3>

<form *ngFor="let movie of movies">
  <h4>{{movie.name}}</h4>
  <p>Available:</p>
  <button
    type="button"
    (click)="removeMovieQuantity(movie.name)"
    [disabled]="movie.quantity <= 0"
  >
    -
  </button>
  {{movie.quantity}}
  <button
    type="button"
    (click)="addMovieQuantity(movie.name)"
    [disabled]="movie.quantity >= movie.available"
  >
    +
  </button>
</form>

Max Andy Diaz Neyra

Codigo final de la clase:

import { Component } from "@angular/core";

type Movie = {
  name: String;
  available: Number;
  quantity: Number;
};

type Movies = Array<Movie>;

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "Películas";
  movies: Movies = [
    {
      name: "Avenger",
      available: 5,
      quantity: 0
    },
    {
      name: "Terminator",
      available: 3,
      quantity: 0
    }
  ];
  addMovieQuantity(movieName) {
    const movieIndex = this.movies.findIndex(
      (movie) => movie.name === movieName
    );
    this.movies[movieIndex].quantity += 1;
  }
  removeMovieQuantity(movieName) {
    const movieIndex = this.movies.findIndex(
      (movie) => movie.name === movieName
    );
    this.movies[movieIndex].quantity -= 1;
  }
}

<!--The content below is only a placeholder and can be replaced.-->
<div>
  <h2>
    {{ title }}
  </h2>
  <form *ngFor="let movie of movies">
    <h4>{{movie.name}}</h4>
    <button
      type="button"
      (click)="removeMovieQuantity(movie.name)"
      [disabled]="movie.quantity===0"
    >
      -
    </button>
    {{movie.quantity}}
    <button
      type="button"
      (click)="addMovieQuantity(movie.name)"
      [disabled]="movie.quantity===movie.available"
    >
      +
    </button>
  </form>
</div>

Orangel Gonzalez

Reto:

  <button
    type="button"
    (click)="removeMovieQuantity(movie.name)"
    [disabled]="movie.quantity === 0" >
    -
  </button>

  {{ movie.quantity}}

  <button
    type="button"
    (click)="addMovieQuantity(movie.name)"
    [disabled]="movie.quantity === movie.available">
    +
  </button>

Francisco Horacio Arenas Massa

my code

Use lo que corresponde al [disabled]

<h3>{{ title }}</h3>

<form *ngFor="let movie of movies">
  <h4>{{ movie.name }}</h4>
  <button type="button" (click)="addMovieQuantity(movie.name)" [disabled]="movie.available <= movie.quantity">+</button>
  {{ movie.quantity }}
  <button type="button" (click)="removeMovieQuantity(movie.name)" [disabled]="0 >= movie.quantity">-</button>
</form>

Donovan RM

Si les llega en estos tiempos a salir el error:

src/app/app.component.ts:30:20 - error TS7006: Parameter 'movieName' implicitly has an 'any' type.

Este error se debe a que TypeScript, el lenguaje de programación utilizado en Angular, está aplicando comprobaciones de tipo y requiere que se especifiquen los tipos de los parámetros de las funciones.

Para solucionar este error, puedes especificar explícitamente el tipo de 'movieName' como 'string' en la firma del método 'addMovieQuantity'.

addMovieQuantity(movieName: string) {
  const movieIndex = this.movies.findIndex(
    (movie) => movie.name === movieName
  );
  this.movies[movieIndex].quantity += 1;
}

Gilberto Espinoza Maciel