Objetivo:
- Utilizar lógica para agregar class dinámicos en el html.
- Utilizar bootstrap
- Utilizando el proyecto angular-faster actualizar el archivo index.html agregando la dependencia con bootstrap de la siguiente manera:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularFastest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
- Actualizar la información del header en el archivo llamado users.component.html como sigue:
<header >
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="/">Mi Angular App!</a>
</div>
</nav>
</div>
</header>
- Actualizar la información del main en el archivo llamado users.component.html como sigue:
<main>
<div class="container">
<div class="col-sm-4" *ngIf="users">
<ul class="list-group">
<li *ngFor="let u of users" (click)="selectUser(u)" class="list-group-item" [class.active]="u == activeUser">
{{u.name}} {{u.username}}
</li>
</ul>
</div>
<div class="col-sm-8 user-actived">
<div *ngIf="activeUser">
<h2>{{activeUser.name}} <small>{{activeUser.username}}</small></h2>
</div>
<div *ngIf="!activeUser">
<h2>Seleccionar un usuario</h2>
</div>
</div>
</div>
</main>
- Actualizar el archivo llamado users.component.css con la siguiente informacion:
.list-group-item {
cursor: pointer;
}
.user-actived {
background-color: #ecf0f1
}
- Levantar la aplicación utilizando ng serve y la pantalla se debería ver parecido a esto:
No hay comentarios:
Publicar un comentario