---
title: Comenzar con Angular
---
{%hackmd hackmd-dark-theme %}

## Requisitos

- Tener Nodejs =< v18.12.1
- Instalar el cli de angular: `npm i -g @angular/cli`
- Corroborar que se instalo de forma global: `ng version`

## Extensiones recomendadas

- [**Angular language service** (*Vs Code*)](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template):
nos permite comunicar nuestro proyecto con el ecosistema de angular.
- **Angular DevTools** (*Chrome*):
nos permite tener herramienta dentro del navegador para ver el arbol de componente, estados y más...

## Crear un nuevo proyecto

La herramienta @angular/cli, nos permite crear un nuevo proyecto de la siguiente manera.

**Crear un nuevo proyecto con nombre my-app**

ng new my-app

**Correr el proyecto**

npm run start 
# o también puede usar en su lugar: ng serve

## Indagando en el proyecto

**Estructura del proyecto**

📂 my-app
└───📂 src
    ├───📂 app
    └───📂 assets

**Características del componente**

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My best APP!';
}

Podemos crear un método para cambiar el valor de `title`:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My best APP!';
  // 👇 método que modificará el valor del título
  changeTitle(){
    this.title = 'changed'
  }
}

Una vez declarado el método, podemos ir al html y crear un botón que ejecute el método:

<h1>Hola {{ title }}</h1>
<button (click)="changeTitle()">Cambiar</button>

### Generar un nuevo componente

ng g c components/product

>- g => de generate
>- c => de component
>- components/product => ubicación y nombre del componente

Una vez creado el componente, si está pensado apra ser un producto lo primero que deberíamos hacer es declarar los tipos que corresponde a el producto que recibirá nuestro componente, esto lo podemos hacer a través de ***intefaces***, siendo un poco más organizado podemos hacer una carpeta de modelos para almacenar esas intefaces.

// app/models/product.model.ts
interface Product {
    id: number;
    title: string;
    price: number;
    images: string[];
}

Añadir el componente, cada componente tiene un ***selector***, con el podemos incluir este componente en el DOM principal.

### Intercambiare valores entre componentes

**Decorador @input**

Para indicarle a un componente que puede recibir un valor desde el componente padre debemos agregarle el decorador `@input` a la propiedad que deseamos controlar.

>Un input es análogo a lo que vendrían siendo los **props** en [React](https://es.react.dev/).

Para comenzar, debemos importar esta clase y usarlo como decorador en la propiedad:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
  // 👇 decoramos            👇 inciar el valor por defecto
  @Input() title: string = 'productos';
}

Hecho esto podemos recibir el valor de la siguiente manera:

<h1>Hola {{title }}</h1>
<button (click)="changeTitle()">Cambiar</button>

<app-product title="Productazos"></app-product>

Pero al final, hemos creado una interfaz para usar en este componente, asi haciendo el cambio, la siguiente es una forma de como recibir un producto declarado en la interface y darle los valores iniciales:

import { Component, Input } from '@angular/core';
import { Product } from "../../models/product.model"

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {

  @Input() product: Product = {
    title: '',
    price: 0,
    images: [],
    id: 0
  };
}

Y la otra es usar una característica de **TypeScript**:

import { Component, Input } from '@angular/core';
import { Product } from "../../models/product.model"

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {  
  // 👇 de esta forma no nos obligará a declararlo (usalo con cuidado)
  @Input() product!: Product;
}

Ahora vamos al componente y ya no enviariamos un título, sino que un producto, que vamos a obtener desde una API.

<h1>Hola {{title }}</h1>
<button (click)="changeTitle()">Cambiar</button>

<app-product title=""></app-product>