Tutorial 2: Instalación de Kikstart UI
Tags: angular, kikstart, beginners, espanol
Published: 2020-07-14 20:37:53

---
title: "Tutorial 2: Instalación de Kikstart UI"
description: "En este tutorial aprenderemos que Kikstart UI contiene dependencias que podemos utilizar para construir nuestra app."
published: true
series: "Introducción a Kikstart UI"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/i/c60ri1xnyuhzrqt7wm2i.png"
// canonical_url: ""
tags: angular, kikstart, beginner, espanol
---

En este tutorial aprenderemos que Kikstart UI contiene dependencias que podemos utilizar para construir nuestra app.

## Requisitos
- Haber realizado el tutorial 1, donde instalamos `Angular CLI` y creamos una app.

## Paso # 1
En este paso instalamos los temas de Kikstart UI. Los temas son una versión personalizada de [bootswatch](https://bootswatch.com/) y estos mismos son temas de [bootstrap](https://getbootstrap.com/).

1: Ejecuta el siguiente comando para instalar la dependencia:

```bash
npm install @kikstart-ui/themes
```
   
2: Actualiza los estilos de scss, en tu editor busca la ruta
`src/styles.scss` y agrega lo siguiente:

```scss
@import "~@kikstart-ui/themes/scss/dark";
```
> 📖 kikstartpedia
>
> En `Kikstart UI` puedes experimentar con los diferentes styles de layout. Cambia la palabra **dark** en el **@import** por **pirate** o **light** y mira como se ve 😉.     


## Paso # 2
En este paso instala el `layout-web` y  utilízalo en tu `AppComponent`.

1: Ejecuta el siguiente comando para instalar la dependencia:

```bash
npm install @kikstart-ui/layout-web
```
2: Busca la ruta `src/app/app.module.ts` y agrega lo siguiente en la parte superior:

```typescript
import { LayoutWebModule } from '@kikstart-ui/layout-web'
```

3: Luego agrega `LayoutWebModule` en el array imports de `@NgModule`.

```typescript
@NgModule({
  declarations: [
    AppComponent,  
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutWebModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
4: En tu editor busca la ruta `src/app/app.component.html` y cambia el contenido con:

```html
<web-layout>
  <header> header </header>
  <router-outlet></router-outlet>
  <footer class="text-center text-muted py-3">
    Copyright &copy; 2020
  </footer>
</web-layout>
```

## Paso # 3
En este paso agrega la navegación principal a tu app. Usa el `UiNavbarModule` y configura el `brand`.

1: Busca la ruta `src/app/app.module.ts` y agrega lo siguiente en la parte superior:

```typescript
import { UiNavbarModule} from '@kikstart-ui/ui-navbar';
```

2: Luego agrega `UiNavbarModule` en el array imports de `@NgModule`.

```typescript
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutWebModule,
    UiNavbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

3: Busca la ruta `src/app/app.component.ts` y agrega lo siguiente en la parte superior:

```typescript
import { UiBrand} from '@kikstart-ui/ui-brand';
``` 
4: Luego en el mismo archivo define una propiedad `brand` con el tipo `UiBrand`.

```typescript
 export class AppComponent {
  title = 'site';
  brand: UiBrand = {
    name: 'Site',
    logo: 'https://github.com/kikstart-ui.png',
  };
}
```
5: En tu editor busca la ruta `src/app/app.component.html` y cambia el header a:

```html
<header>
  <ui-navbar navbarStyle="dark" [brand]="brand"></ui-navbar>
</header>
```

## Resumen
Para resumir en este tutorial hemos instalado `Kikstart UI` y sus dependencias, creamos un layout que queda listo para empezar el siguiente tutorial en donde configuraremos nuestras rutas.


El repositorio con este paso lo puedes encontrar [aquí](https://github.com/KikstartDev/introduccion-a-kikstart-ui/tree/tutorial-2).