---
# System prepended metadata

title: Comenzar con Angular

---

---
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**

```bash!
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**


```typescript=
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`:

```typescript=
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: 

```htmlembedded=
<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.

```typescript=
// 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: 

```typescript=
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:

```htmlembedded
<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: 

```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 {

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

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

```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.


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

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