Inicio del curso

1

De qu茅 tratar谩 este curso sobre Angular 4

Introducci贸n a Angular 4

2

Versionamiento en Angular

3

驴Qu茅 es Angular? Versiones y ventajas

4

Typescript: qu茅 es

5

Introducci贸n al Proyecto: PlatziSquare!

Setup del Ambiente de Trabajo

6

Herramientas de trabajo y Angular CLI

7

Generaci贸n y estructura de Angular 4

8

RETO: Haz un cambio simple en el proyecto.

Conceptos B谩sicos

9

Para qu茅 nos sirven los M贸dulos y Componentes

10

Tipos de Data Binding y String Interpolation

11

Property Binding

12

Event Binding

13

Two Way Data Binding

14

Directivas en Angular 4 y ngFor

15

Directiva ngIf

16

Instalando librer铆as con NPM (Google Maps)

Directivas

17

Directivas ngStyle y ngClass

18

Directiva ngSwitch

19

Directiva de atributo

20

Host Listeners

21

Host Binders

Angular UI

22

Angular Material y Bootstrap

23

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

24

Qu茅 hace el router en Angular 4

25

Implementaci贸n de Rutas en el Proyecto

26

Diferencias entre href y routerLink

27

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

28

Par谩metros en Rutas

29

Par谩metros tipo Query

30

Creando una vista de detalle para el proyecto

31

Creando la p谩gina de contacto para PlatziSquare

Servicios

32

Qu茅 son los servicios en Angular 4

33

Creando nuestro propio servicio

34

Configurando Firebase en nuestro proyecto

35

Guardando Records en Firebase

36

Obteniendo records desde Firebase

37

Obteniendo coordenadas usando Geocoding

38

Reto: Crear una vista para editar records

39

Mostrando marcadores en el Mapa de Google

Conexi贸n Remota (Http y Sockets)

40

Funcionamiento de los llamados Http y Sockets

41

Qu茅 es una arquitectura cliente - servidor

42

Enviando llamados tipo POST

43

Enviando llamados tipo GET

44

Formateando respuestas del servidor con el operador map()

45

Manejando errores HTTP

Pipes

46

Utilidad de los Pipes en Angular 4

47

Usando los pipes por defecto de Angular

48

Par谩metros en pipes

49

Creando nuestro propio pipe

Animaciones en Angular

50

Configurando animaciones en nuestro proyecto

51

Transiciones

52

Callbacks

53

Soluci贸n al Reto: A帽adiendo animaciones a nuestra aplicaci贸n

Testing en Angular

54

Introducci贸n a unit tests

55

Configuraci贸n de testing por default

56

Corriendo los tests

57

Creando unit tests para componentes

58

Integraci贸n de Unit Test con Servicios

Autenticaci贸n y Protecci贸n de Rutas

59

C贸mo funcionan los JSON Web Tokens

60

Preparaci贸n de vistas para login y registro

61

Registrando usuarios

62

Loggeando usuarios

63

Protecci贸n de Rutas

64

Autenticaci贸n con redes sociales.

65

Logout

RxJS

66

Qu茅 es RxJS

67

Configurando RxJS en nuestro proyecto

68

Uso de los Observables

69

Implementando un TypeAhead

70

Implementando un TypeAhead 2

71

Soluci贸n al reto autocompletar los campos de direcci贸n usando observables

Publicando nuestro proyecto

72

Publicando en Firebase Hosting

Fin del curso

73

Conclusi贸n 驴Qu茅 aprendimos en el curso?

74

Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario

Sesiones en vivo

75

Creando un traser bullet de PlatziSquare

76

Sesi贸n de preguntas y respuestas

77

Release de Angular 5

78

Sesi贸n de preguntas y respuestas

79

Angular Universal

Contenido Bonus

80

Actualizaci贸n de angular, versi贸n 6.0

Disfruta de nuestro contenido y eventos por un a帽o a un precio especial

Antes: $179

Currency
$149/a帽o
隆Suscr铆bete!

馃敟 Te quedan 馃敟

1D
8H
41M
37S
Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

RETO: Haz un cambio simple en el proyecto.

8/80

Lectura

Cuando creaste el proyecto, se cre贸 un componente por Default llamado home, el cual tiene la 煤nica funci贸n de darte la bienvenida al framework.

Has un cambio peque帽o en 茅l, para que por ejemplo:

El texto est茅 en espa帽ol y no en ingl茅s
El app no se llame 鈥榓pp鈥, si no 鈥楶latziSquare鈥

Comparte tu soluci贸n en los comentarios.

Aportes 115

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.




export class AppComponent {
  title = 'PlatziSquare';
}

Index.Html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>```

Archivo app.component.ts

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

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

Para modificar el nombre del App

  1. Vamos al Proyecto dentro de la carpeta src/app y seleccionamos el archivo app.component.ts
  2. Modificamos el siguiente segmento
    title = 鈥楶latziSquare鈥;

Para modificar la Bienvenida a Ingles

  1. Vamos al Proyecto dentro de la carpeta src/app y seleccionamos el archivo app.component.hmtl
    2.Modificamos el Siguiente Segmento

<h1>
Bienvenidos a {{title}}!
</h1>

Hola me da este error
Error:Initialization error (angular 2 language service). Cannot read property 鈥楥ommandTypes鈥 of undefined

que puedo hacer??

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

buenas clases

app.component.ts
export class AppComponent {
  title = 'PlatziSquare';
}
index.html
<html lang="es">

export class AppComponent {
  title = 'PlatziSquare';
}

<html lang="es">

Algo simple, pero se realizo.

reto completado y entendido

El t铆tulo lo cambiamos en el archivo app.component.ts del componente app (el que angular cli nos crea por defecto)

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

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

y adem谩s cambiamos la otra parte del mensaje de bienvenida que est谩 en ingl茅s a espa帽ol en el archivo app.component.html

<h1>
    Bienvenido a {{ title }}!
</h1>

texto se cambio en Html

export class AppComponent {
  title = 'PlatziSquare';
}
  <h1>
    Bienvenido a {{ title }}
  </h1>

a mi no me sale he hecho los cambios y la pagina le cuesta cargar esta pensando ya lleva 2 minutos

import { Component } from 鈥楡angular/core鈥;

@Component({
selector: 鈥榓pp-root鈥,
templateUrl: 鈥./app.component.html鈥,
styleUrls: [鈥./app.component.css鈥橾
})
export class AppComponent {
title = 鈥楶latziSquare鈥;
}

se cambio en la ruta: src/app/app.component.ts

export class AppComponent {
  title = 'platzisquare';
}
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

app.component.html para hacer el cambio del texto y en app.component.ts el cambio del t铆tulo de la app

// en el html
<title>{{texto}}</title>

//en el TypeScript 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  texto:string= 'curso platzi';
}

En src>app>app.component.html

<h1>
    Bienvenido a {{ title }}!
</h1>

En app.component.ts se modifica el mensaje de bienvenida

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

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

/index.html:

<html lang="es"> <!-- Solo define el charset -->
...
<title>PlatziSquare</title>

app.component.html (Quien va a manejar los compoennts)

  <h1>
    Bien venido a {{ title }}!
  </h1>

/app/app.component.ts:

export class AppComponent {
  title = 'platzisquare';
}
<html lang="es">
export class AppComponent {
 title = 'PlatziSquare';
}

Hola!! Comparto soluci贸n del primer reto del curso de angular 4

index.html

<<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>PlatziSquare</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>>

app.component.ts

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

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

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

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

al abrir el component.html en el navegador me pone literal鈥
Welcome to {{ title }} !
es decir no me devuelve el valor contenido en title
si no me pone tal cual {{title}}

驴C贸mo puedo insertar una imagen? :c

Hola, tengo mi soluci贸n como el resto de compa帽eros pero creo que el profesor deber铆a indicar cu谩l es la soluci贸n correcta, porque las personas que no sabemos Angular ignoramos del tema. Investigue sobre el tema y he leido los comentarios de los compa帽eros, pero vuelvo y repito creo que el Profesor nos deber铆a orientar por el mejor camino de la soluci贸n y no quedarnos con la interrogante.

1 . cambiar el contenido en el html del componente autogenerado por aungular cli

2 . cambiar el atributo title que se encuentra en el
component.ts

En el archivo llamado 鈥渁pp.component.html鈥, cambiar el texto de ingles a espa帽ol:

<div style="text-align:center">
  <h1>
    Bienvenido {{ title }}!
  </h1>
  </div>
<h2>Aqui estan algunos enlaces que te ayudan a comenzar:</h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Gu铆a de Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">Documentaci貌n de CLI</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
  </li>
</ul>

peque帽o si, f谩cil para los noobs (yo) no

Se modifica el app.component.html (que se encuentra en source/app):

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <h1>
        Bienvenido a {{ title }}!
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,">
</div>
<h2>Algunos links que te pueden ayudar: </h2>
<ul>
    <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Platzi</a></h2>
    </li>
    <li>
        <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Ayuda</a></h2>
    </li>
    <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
</ul>

<router-outlet></router-outlet>
exportclassAppComponent{
  title = 'App Negocios';
}
exportclassAppComponent{
  title = 'PlatziSquare ';
}

Para cambiar el nombre del app, modificamos el titulo que se encuentra en app.component.ts

Y para cambiar el idioma en la web, cambiamos en el index.html el lang a 鈥渆s鈥.

<co<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido al curso de Angular dictado por {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aqu铆 te dejamos algunos enlaces para que comiences: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Recorrido de Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentaci贸n</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
  </li>
</ul>
  1. Para el texto en Espa帽ol en la carpeta src/app/app.components.html
    Cambiamos la etiqueta h1 por esto:
<h1>
    Bienvenido a {{ title }}!
</h1>
  1. Para el t铆tulo no s dirigimos al archivo: src/app/app.component.ts
export class AppComponent {
  title = 'Platzisquare';
}
export class AppComponent {
  title = 'PlatziSquare';
}

Primeramente luego de crear el proyecto ng new platziSquare y al crear los componentes core en el *.html colocas el tag de

<html>lang=es</html>

Luego en el *.ts del core luego de la seccion de imports, la declaracion de los selectores y a donde apunta el html y css tenemos el

export class ALGO{
constructor() {}
title='PlatziSquare'
}

Con esto seteamos que el titulo de la pagina en la parte superior de tu pesta帽a del navegador diga platziSquare normalmente estas configuraciones aplican en el core general siempre son llamados app.component.html o app.component.ts.

export class AppComponent {
  title = 'PlatziSquare';
}

Se debe modificar el texto manualmente al espa帽ol.
Otra opci贸n seria agregar localizaci贸n, pero eso lo veremos mas adelante.

En este caso para la modificaci贸n del index en espa帽ol, unicamente se debe modificar el lang del index como se indica en los comentarios

<<html lang="es">>
export class AppComponent {
  title = 'PlatzySquare';
  sms ='Happy new year';
}
<<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  
</div>
<h2>Algunos links que te ayudaran a comenzar: </h2>
>

export class AppComponent {
title = 鈥榩latzisquare鈥;
}

En mi version tenia por defecto el titulo que le hab铆a colocado de nombre al proyecto.

export class AppComponent {
  title = 'platzisquare';
}

Cambio realizado en:

\platzisquare1\src\app/app.component.html

<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,....">
</div>
<h2>He aqu铆 unos links para comenzar: </h2>

<div style=鈥渢ext-align:center鈥>
<h1>
Bienvenido a {{ title }}!
</h1>
</div>

export class AppComponent {
title = 鈥榚scuela鈥;
}

En la ruta platzi square\src\app\app.component.ts
Cambiamos el t铆tulo aqu铆:

export class AppComponent {
  title = 'PlatziSquare';
}

src/app/app.componets.ts
export class AppComponent {
title = 鈥榩latziSquare鈥;
}

src/app/app.componets.html
<h1>
Bienvenido a {{ title }}!
</h1>

src/index.html
<html lang=鈥渆s鈥>

  • Texto en espa帽ol:
    Modificar el archivo app.component.html, cambiando el texto que se encuentra en ingles.
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aqu铆 hay algunos enlaces para ayudarte a comenzar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

  • Nombre de la app:
    Modificar el archivo app.component.ts, cambiando la variable title.
export class AppComponent {
  title = 'meridasquare';
}

export class AppComponent{
title = 鈥楶latziSquare鈥;
}

Yo modifique el el idioma desde el componente app.component.html, hay me permite ingresar los mensajes de mi app

index.html

    <title>PlatziSquare</title>

app.component.ts

export class AppComponent {
  title = 'PlatziSquare';
}

app.component.html

    <h1>
        Bienvenido a {{ title }}!
    </h1>
<html lang="es">
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'PlatziSquare';
}
```
  1. Accedemos a la carpeta sr/app/app.component.html y modificar las etiquetas en ingles por espa帽ol.
  2. Guardar todo, y recargar p谩gina.
  3. npm update y ng serve

export class AppComponent {
title = 鈥楶latzi Square鈥;
}

Hola a todos! Legue a la parte del reto! Muestro mi resultado:

  1. Cambiar titulo a espa帽ol:
    <h1> Bienvenidos a {{ title }}! </h1>
  2. Cambiar nombre de app:
    export class AppComponent {
    title = 鈥楶latziSquare鈥; }

Alguien podr铆a decirme como hacer para subir una imagen? Aun no logro hacerlo!
Gracias!

En la carpeta 鈥渟rc鈥 contiene la carpeta 鈥渁pp鈥 en ella hay un archivo 鈥渢s鈥 (typescript) ahi vinene la linea que se puede cambiar para el titulo.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Bienvenidos al reto de modificacion de PlatziSquare';
}```

Fue sencillo el cambio, aunque me costo un par de minutos navegar en el 谩rbol del proyecto para identificar dec铆a 鈥淲elcome鈥.

Estoy reci茅n aprendiendo Angular y bueno, vengo de la programaci贸n web convencional donde todo estaba en un HTML puro. Y me confundi cuando encontre un mont贸n de archivos incluso en el folder de app.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenidos a  {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

Reto Cumplido:

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aqui encontraras algunos links de ayuda: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
<h3>Que disfrutes tu aprenidzaje!</h3>

<router-outlet></router-outlet>```
import { Component } from '@angular/core';

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

Cambieee el titleeeeeeeeeeee nice

Angular 7: Modificqu茅 el archivo en la carpeta app: app.component.ts

para modificar todo el texto en la ruta src/app/app.component.html

<!鈥<h2>Here are some links to help you start: </h2>鈥>
<h2>Aqu铆 hay algunos enlaces para ayudarte a comenzar: </h2>

se hace manual.

y el titulo de bienvenida en la ruta src/app/app.component.ts

export class AppComponent {
title = 鈥榩latziSquare鈥;
}

import { Component } from 鈥楡angular/core鈥;

@Component({
selector: 鈥榓pp-root鈥,
templateUrl: 鈥./app.component.html鈥,
styleUrls: [鈥./app.component.css鈥橾
})
export class AppComponent {
title = 鈥楶latzi Square鈥;
}

<div style=鈥渢ext-align:center鈥>
<h1>
Bienvenido a {{ title }}!
</h1>
</div>

<title>PlatziSquare</title>

En src/app/app.component.ts cambio la linea del titulo

title = 'platzisquare';

Y listo

Complicado para los que no sabemos

Para cambiar el titulo cambi茅 la parte del app component.ts
Para cambiar el idioma cambi茅 a mano las partes del app.component.html

export class AppComponent {
  title = 'platzisquare';
}```

**tambien cambiar los tests

 it(`should have as title 'Platzisquare'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('Platzisquare');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Bienvenido a PlatziSquare!');```

app.component.html

<span>{{ title }} PlatziSquare!</span>

El archivo index.html muestra una etiqueta que llama a nuestro contenido, <app-root></app-root>, busqu茅 en la carpeta app y encontr茅 un archivo llamado app.component.html, ese es el que hay que modificar para que cambie el contenido de nuestra p谩gina.

Se modifico el archivo en app.component.html

Reto cumplido.

app.component.html

app.component.ts

index.html

el cambio en la variable dentro de TS app.components.ts
})
export class AppComponent {
title = 鈥楶latziSquare鈥;
}

En mi version de Angular hay una carpeta llamada app. En dicha carpeta hay varios archivos de los cuales para lo que nos interesa destaca el app.component.html y el app.component.ts

app.component.html

<h1>
    Bienvenido a {{ title }}!
  </h1>

app.component.ts

export class AppComponent {
  title = 'PlatziSquare';
}
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenidos a  {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aqui hay algunos enlaces para ayudarte a comenzar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Gira de Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">Documentacion de CLI</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

Reto completado

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aqu铆 tienes algunos enlaces que te pueden ayudar a empezar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour de los h茅roes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentaci贸n</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

reto completado!

  • cambiar el texto a espa帽ol en el archivo: app.component.html
  • cambiar el texto de app por platzisquare desde: app.component.ts

Reto completado:

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Aqu铆 hay algunos links para ayudarte a comenzar: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour de h茅roes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">Documentaci贸n de CLI</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Blog de Angular</a></h2>
  </li>
</ul>


app.module.ts

export class AppComponent {
  title = 'PlatziSquare';
}

Cumplido!



<!-- Next Steps -->
<h2>Next Steps, Teddy Sipra Morgado</h2>
<p>What do you want to do next with your app?</p>

<input type=鈥渉idden鈥 #selection>

en app.component.html , realice el cambio en la etiqueta <h1>

<h1>
Bienvenido a {{ title }}!
</h1>

Hago un cambio en el fichero src\app\app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Kaixo eta ongi etorri gure  {{ title }} aplikaziora!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>```

Cumplido!

export class AppComponent {
title = 鈥楶laztiSquare!鈥;
}

HTML

<h1>
{{title}}
</h1>

el titulo en compomemt.ts y el idioma en component.html

Listo

Import { Component } from 鈥楡angular/core鈥;

@Component({
selector: 鈥榓pp-root鈥,
templateUrl: 鈥./app.component.html鈥,
styleUrls: [鈥./app.component.css鈥橾
})
export class AppComponent {
title = 鈥楲OS MAPAS DE PLATZI鈥;
}