Angular Universal
in production
An epic story
Who am I ?
Adrian Ferreres Esteller
* email: ardiadrianadri@gmail.com
*Twitter:
ardiadrianadri
*Github:
https://github.com/ardiadrianadri
Founder of ngLabs Madrid
GFT Employee
Index:
- Once upon time...
- Understanding universal
-
Problems that we found
- HTML templates
- External libraries
- Exceptions
- Put in production
- Angular meets Netflix OSS
- Example in production
Once upon time...
My first day at my new job
My new boss
Once upon time...
My new team... the best team I've ever met
My new chalenge !!!!
Understanding Universal
Understanding Universal
Understanding Universal
Problems that we found
Templates HTML:
The Problem
@Component({
selector: 'universal-home',
templateUrl: './home.html'
})
export class HomeComponent implements OnInit {}<!doctype html>
<html lang="en">
<head>
<title>Angular 2 Universal</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="/global.css">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<base href="/">
</head>
<body>
<app>
Loading Universal ...
</app>
<script src="/index.js"></script>
</body>
</html>Templates HTML:
The solution
@Component({
selector: 'universal-home',
template: `
<div class="row">
<div class="col-xs-offset-8 col-xs-2">
<label for="languageSelect">{{ 'SELECT_TITLE' | translate }}</label>
</div>
<div class="col-xs-2">
<select class="form-control" (change)="selectLanguage($event.target.value)">
<option [selected]="translate.currentLang === 'en'" value="en">{{'ENGLISH' | translate}}</option>
<option [selected]="translate.currentLang === 'es'" value="es">{{'SPANISH' | translate}}</option>
<option [selected]="translate.currentLang === 'ru'" value="ru">{{'RUSSIAN' | translate}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="well well-lg">
<div class="row">
<div class="col-xs-4">
<img src="assets/universal.jpeg"/>
</div>
<div class="col-xs-8">
<h1>{{ 'WELLCOME' | translate}}</h1>
<span>{{ 'SUBTITLE' | translate }}</span><br />
<span>{{ 'NAMESPACE.WITHPARAMS' | translate:{languageCode: translate.currentLang.toUpperCase()} }}</span><br />
<span>{{configuration}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>
Buttons
</h2>
<div class="row">
<div class="col-sm-6">
<h3>Tag button</h3>
<button class="btn btn-primary">btn btn-primary</button>
<button class="btn btn-primary btn-pill">btn btn-primary btn-pill</button>
<button class="btn btn-primary-dark btn-pill">btn btn-primary-dark btn-pill</button>
<button class="btn btn-primary-plain btn-pill">btn btn-primary-plain btn-pill</button>
<button class="btn btn-round"><i data-icon=""></i></button>
<button class="btn btn-round"><i data-icon=""></i></button>
<button class="btn btn-success btn-pill">btn btn-success btn-pill</button>
<button class="btn btn-danger btn-pill">btn btn-danger btn-pill</button>
</div>
<div class="col-sm-6">
<h3>Tag anchor</h3>
<a class="btn btn-primary">btn btn-primary btn-pill</a>
<a class="btn btn-primary btn-pill">btn btn-primary btn-pill</a>
<a class="btn btn-primary-dark btn-pill">btn btn-primary btn-pill</a>
<a class="btn btn-primary-plain btn-pill">btn btn-primary-plain btn-pill</a>
<a class="btn btn-round"><i data-icon=""></i></a>
<a class="btn btn-round"><i data-icon=""></i></a>
<a class="btn btn-success btn-pill">btn btn-success btn-pill</a>
<a class="btn btn-danger btn-pill">btn btn-danger btn-pill</a>
</div>
</div>
<h2>
Form components
</h2>
<hr>
<div class="row">
<div class="col-sm-6">
<form>
<input class="form-control light" type="text" placeholder="Light input field">
<br>
<input class="form-control dark" type="text" placeholder="Dark input field">
</form>
</div>
</div>
<h2>
Text
</h2>
<hr>
<div class="row">
<div class="col-sm-6">
<h3>Text elements</h3>
<h1 class="text-blue">Header 1 blue</h1>
<h1 class="text-black">Header 1 black</h1>
<h2 class="text-blue">Header 2 blue</h2>
<h2 class="text-black">Header 2 black</h2>
<h3 class="text-blue">Header 3 blue</h3>
<h3 class="text-black">Header 3 black</h3>
<h4 class="text-blue">Header 4 blue</h4>
<h4 class="text-black">Header 4 black</h4>
<h5 class="text-blue">Header 5 black</h5>
<h5 class="text-black">Header 5 black</h5>
<p class="text-blue">Blue text p</p>
<p class="text-black">Black text p</p>
<p class="text-gray">Gray text p</p>
<p class="text-gray italic">Gray italic text p</p>
<div class="well">
<p class="text-white">White text</p>
</div>
</div>
<div class="col-sm-6">
<h3>Link elements</h3>
<a class="link text-blue">Blue regular link</a>
<br>
<a class="link text-black">Black regular link</a>
<br>
<a class="link text-blue no-under">Blue link with no previous underline</a>
<br>
<a class="link text-black no-under">Black link with no previous underline</a>
<br>
<a class="link text-black to-blue no-under">Black link with no previous underline with blue hover</a>
<h4>Links with Icon</h4>
<a class="link link-icon text-blue"><i class="icon icon-search mr-xs"></i><span>Blue link with no previous underline</span></a>
<br>
<a class="link link-icon text-black"><i class="icon icon-search mr-xs"></i><span>Black link with no previous underline</span></a>
<br>
<a class="link link-icon text-blue no-under"><i class="icon icon-search mr-xs"></i><span>Blue link with no previous underline</span></a>
<br>
<a class="link link-icon text-black no-under"><i class="icon icon-search mr-xs"></i><span>Black link with no previous underline</span></a>
<br>
<a class="link link-icon text-black to-blue no-under"><i class="icon icon-search mr-xs"></i><span>Black link with no previous underline with blue hover</span></a>
<div class="well">
<a class="link text-white">White regular link</a>
<br>
<a class="link text-white no-under">White link with no previous underline</a>
<br>
<a class="link text-white to-blue no-under">White link with no previous underline with blue hover</a>
<br>
<a class="link link-icon text-white"><i class="icon icon-search mr-xs"></i><span>White link with no previous underline</span></a>
<br>
<a class="link link-icon text-white no-under"><i class="icon icon-search mr-xs"></i><span>White link with no previous underline</span></a>
<br>
<a class="link link-icon text-white to-blue no-under"><i class="icon icon-search mr-xs"></i><span>White link with no previous underline with blue hover</span></a>
</div>
</div>
</div>
<div class="icons-list">
<div class="icon-container" *ngFor="let icon of icons">
<i class="{{icon}}"></i>
<p>{{icon}}</p>
</div>
</div>
</div>`
})
export class HomeComponent implements OnInit {}Templates HTML:
How it is now
@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class NarqHomeComponent {} <html><head>
<meta charset="UTF-8">
<base href="/">
<title>Universal Test</title>
<link href="styles.css" rel="stylesheet"><script type="text/javascript" src="client.js" defer=""></script><script type="text/javascript" src="stylesClient.js" defer=""></script><style ng-transition="my-app-id">@charset "UTF-8";
.icon-cross-icon[_ngcontent-c0]:before {
content: "M"; }
.icon-dropdown-plain-icon[_ngcontent-c0]:before {
content: "\E91F"; }
.icon-hamburger[_ngcontent-c0]:before {
content: "\E902"; }
#adjust[_ngcontent-c0] {
margin: auto; }
.header_narq[_ngcontent-c0] {
position: fixed;
z-index: 999;
top: 0;
-webkit-transition: height 366ms cubic-bezier(0.14, 0.32, 0.57, 1);
transition: height 366ms cubic-bezier(0.14, 0.32, 0.57, 1);
font-family: "Source Sans Pro";
font-weight: 600;
background-color: #FFFFFF;
width: 100%;
height: 129px; }
.header_narq[_ngcontent-c0] .lang-selection[_ngcontent-c0] {
font-size: 13px;
float: right;
letter-spacing: 1.3px;
margin-top: 10px;
position: relative;
top: 15px;
text-transform: uppercase;
z-index: 9999; }
.header_narq[_ngcontent-c0] .lang-selection[_ngcontent-c0] ul[_ngcontent-c0] {
list-style: none; }
.header_narq[_ngcontent-c0] .lang-selection[_ngcontent-c0] ul[_ngcontent-c0] li[_ngcontent-c0] {
display: inline-block;
padding-left: 5px;
padding-right: 5px; }
.header_narq[_ngcontent-c0] .lang-selection[_ngcontent-c0] ul[_ngcontent-c0] li[_ngcontent-c0]:not(:last-child) {
border-right: 1px solid #D0CCCC; }
.header_narq[_ngcontent-c0] .lang-selection[_ngcontent-c0] ul[_ngcontent-c0] li[_ngcontent-c0] a[_ngcontent-c0] {
cursor: pointer; }
.header_narq[_ngcontent-c0] .lang-selection[_ngcontent-c0] ul[_ngcontent-c0] li[_ngcontent-c0] a.active[_ngcontent-c0] {
text-decoration: underline; }
.header_narq[_ngcontent-c0] .dropdown[_ngcontent-c0] {
float: right;
z-index: 10;
top: 10px;
font-weight: 600;
line-height: 21px;
height: auto;
right: 0;
width: 160px;
padding: 10px 0px 10px 20px;
-webkit-transition: -webkit-transform 366ms cubic-bezier(0.14, 0.32, 0.57, 1);
transition: -webkit-transform 366ms cubic-bezier(0.14, 0.32, 0.57, 1);
transition: transform 366ms cubic-bezier(0.14, 0.32, 0.57, 1);
transition: transform 366ms cubic-bezier(0.14, 0.32, 0.57, 1), -webkit-transform 366ms cubic-bezier(0.14, 0.32, 0.57, 1); }
.header_narq[_ngcontent-c0] .dropdown.open[_ngcontent-c0] {
background-color: #FFFFFF;
-webkit-box-shadow: rgba(43, 49, 53, 0.16) 0 0 20px;
box-shadow: rgba(43, 49, 53, 0.16) 0 0 20px;
overflow: hidden; }
.header_narq[_ngcontent-c0] .dropdown.active-button[_ngcontent-c0] {
color: #f96a00 !important;
background-color: transparent !important; }
.header_narq[_ngcontent-c0] .dropdown[_ngcontent-c0] a[_ngcontent-c0] {
padding: 0;
font-size: 13px;
line-height: 30px;
font-family: "Source Sans Pro";
font-weight: 600;
text-transform: uppercase;
color: #191B1C;
outline: none;
letter-spacing: 1.3px; }
.header_narq[_ngcontent-c0] .dropdown[_ngcontent-c0] a[_ngcontent-c0]:active, .header_narq[_ngcontent-c0] .dropdown[_ngcontent-c0] a[_ngcontent-c0]:focus, .header_narq[_ngcontent-c0] .dropdown[_ngcontent-c0] a[_ngcontent-c0]:hover {
text-decoration: none;
color: #f96a00;
background-color: transparent; }
.header_narq[_ngcontent-c0] .dropdown[_ngcontent-c0] a[_ngcontent-c0] .icon[_ngcontent-c0] {
font-size: 6px;
vertical-align: middle;
margin-left: 7px; }
.header_narq[_ngcontent-c0] .dropdown[_ngcontent-c0] .dropdown-menu[_ngcontent-c0] {
overflow: hidden;
height: auto;
top: 0;
left: 0;
position: relative;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
background: 0 0;
min-width: 0;
padding: 0;
margin: 0; }
.header_narq[_ngcontent-c0] .access-menu[_ngcontent-c0] {
position: relative;
top: 90px;
z-index: 1;
-webkit-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
-webkit-transition: all 366ms cubic-bezier(0.14, 0.32, 0.57, 1);
transition: all 366ms cubic-bezier(0.14, 0.32, 0.57, 1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; }
.header_narq[_ngcontent-c0] .access-menu[_ngcontent-c0] > div[_ngcontent-c0] {
transform: translate(0, -7px);
-webkit-transform: translate(0, -7px);
-moz-transform: translate(0, -7px);
-ms-transform: translate(0, -7px);
-o-transform: translate(0, -7px);
position: absolute;
right: 0; }
.header_narq[_ngcontent-c0] .access-menu[_ngcontent-c0] a[_ngcontent-c0]:not(:last-child) {
margin-right: 15px; }
.header_narq[_ngcontent-c0] ul[_ngcontent-c0] {
padding: 0; }
.header_narq[_ngcontent-c0] .nav-menu[_ngcontent-c0] {
padding: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
overflow: hidden; }
.header_narq[_ngcontent-c0] .nav-menu[_ngcontent-c0] .container[_ngcontent-c0] {
height: 60px;
line-height: 60px;
overflow: hidden;
overflow-x: auto;
white-space: nowrap; }
.header_narq[_ngcontent-c0] .nav-menu[_ngcontent-c0] li[_ngcontent-c0] {
display: inline-block;
margin-left: 43px; }
.header_narq[_ngcontent-c0] .nav-menu[_ngcontent-c0] li[_ngcontent-c0]:first-child {
margin-left: 0; }
.header_narq[_ngcontent-c0] .nav-menu[_ngcontent-c0] li[_ngcontent-c0] a[_ngcontent-c0] {
color: #191B1C;
font-weight: bold; }
.header_narq[_ngcontent-c0] .nav-menu[_ngcontent-c0] li[_ngcontent-c0] a[_ngcontent-c0]:active, .header_narq[_ngcontent-c0] .nav-menu[_ngcontent-c0] li[_ngcontent-c0] a[_ngcontent-c0]:hover {
text-decoration: none;
color: #f96a00; }
.header_narq.min[_ngcontent-c0] {
height: 78px !important; }
.header_narq.min[_ngcontent-c0] .access_menu[_ngcontent-c0] {
-webkit-transform: translateY(-51px) translateZ(0);
transform: translateY(-51px) translateZ(0);
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
padding-left: 85px; }
.header_narq.min[_ngcontent-c0] .dropdown[_ngcontent-c0] {
transform: translate(0, -70px);
-webkit-transform: translate(0, -70px);
-moz-transform: translate(0, -70px);
-ms-transform: translate(0, -70px);
-o-transform: translate(0, -70px); }
#nav-hamburger[_ngcontent-c0] {
-webkit-transform: translateX(100%);
transform: translateX(100%); }
#nav-hamburger.active-hamburger[_ngcontent-c0] {
-webkit-transform: none;
transform: none; }
#nav-hamburger[_ngcontent-c0] .menu_responsive[_ngcontent-c0] a[_ngcontent-c0] {
height: 50px;
line-height: 5px;
padding: 0 20px 0 20px; }
#nav-hamburger[_ngcontent-c0] .menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .scroll[_ngcontent-c0] {
padding-top: 50px; }
#nav-hamburger[_ngcontent-c0] .menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .scroll[_ngcontent-c0] a[_ngcontent-c0] {
font-size: 22px;
padding-top: 30px;
line-height: 50px;
bottom: 0; }
#nav-hamburger[_ngcontent-c0] .menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .scroll[_ngcontent-c0] > .option_selected[_ngcontent-c0] {
bottom: 40px;
font-size: 17px;
line-height: 85px;
padding: 0 15px; }
#nav-hamburger[_ngcontent-c0] .menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .slice_icon[_ngcontent-c0] {
right: 32px;
line-height: 80px;
font-size: 12px; }
#nav-hamburger[_ngcontent-c0] .menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] > .acceso_clientes[_ngcontent-c0] {
font-size: 19px;
line-height: 70px;
height: 73px;
padding: 0 20px; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] {
font-size: 19px;
margin-bottom: 34px;
padding-top: 20px;
position: relative;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] {
margin: 0;
position: relative;
z-index: 1;
-webkit-transition: width 366ms cubic-bezier(0.27, 0.005, 1, 0.545);
transition: width 366ms cubic-bezier(0.27, 0.005, 1, 0.545); }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a[_ngcontent-c0] {
width: 202px;
height: 30px;
display: block; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a.mobile[_ngcontent-c0], .header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a.tablet[_ngcontent-c0] {
text-indent: -9999px;
background: url("/[object Object]") center center no-repeat;
background-size: contain; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a.mobile[_ngcontent-c0] {
width: 102px;
height: 54px;
background: url("/[object Object]") center center no-repeat;
background-size: contain; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a[_ngcontent-c0]:focus {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a[_ngcontent-c0] svg[_ngcontent-c0] {
fill: #ff7300; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a[_ngcontent-c0] #logo_rest[_ngcontent-c0] {
opacity: 1;
-webkit-transition: opacity 100ms ease-out;
transition: opacity 100ms ease-out;
-webkit-transition-delay: 200ms;
transition-delay: 200ms; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a[_ngcontent-c0] #logo_k[_ngcontent-c0] {
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
-webkit-transition: -webkit-transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995);
transition: -webkit-transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995);
transition: transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995);
transition: transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995), -webkit-transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995);
-webkit-transition-delay: 100ms;
transition-delay: 100ms; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo[_ngcontent-c0] a[_ngcontent-c0] #logo_punto[_ngcontent-c0] {
display: block;
content: '';
width: 6px;
height: 6px;
background: #ff7300;
position: absolute;
bottom: 0;
-webkit-transform: translateX(197px) translateZ(0);
transform: translateX(197px) translateZ(0);
-webkit-transition: -webkit-transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995);
transition: -webkit-transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995);
transition: transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995);
transition: transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995), -webkit-transform 233ms cubic-bezier(0.685, 0.005, 0.575, 0.995);
-webkit-transition-delay: 100ms;
transition-delay: 100ms; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo.logo_min[_ngcontent-c0] {
width: 80px; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo.logo_min[_ngcontent-c0] #logo_rest[_ngcontent-c0] {
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo.logo_min[_ngcontent-c0] #logo_k[_ngcontent-c0] {
-webkit-transform: translateX(-58px) translateZ(0);
transform: translateX(-58px) translateZ(0);
-webkit-transition-delay: 0s;
transition-delay: 0s; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] .logo.logo_min[_ngcontent-c0] #logo_punto[_ngcontent-c0] {
-webkit-transform: translateX(50px) translateZ(0);
transform: translateX(50px) translateZ(0);
-webkit-transition-delay: 0s;
transition-delay: 0s; }
.header_narq[_ngcontent-c0] .header_logo[_ngcontent-c0] #logo_IE_min[_ngcontent-c0] a[_ngcontent-c0] {
width: auto; }
@media only screen and (min-width: 989px) and (max-width: 1200px) {
.header_narq[_ngcontent-c0] .access-menu[_ngcontent-c0] {
top: 25px; }
.header_narq[_ngcontent-c0] .dropdown[_ngcontent-c0] {
right: 300px; }
.header_narq[_ngcontent-c0] .lang-selection[_ngcontent-c0] {
right: 295px; } }
@media only screen and (max-width: 989px) {
.header_narq[_ngcontent-c0] {
height: 78px;
-webkit-transition: -webkit-transform 266ms ease-out;
transition: -webkit-transform 266ms ease-out;
transition: transform 266ms ease-out;
transition: transform 266ms ease-out, -webkit-transform 266ms ease-out; }
.header_narq[_ngcontent-c0] .header_tablet_mobile[_ngcontent-c0] .logo[_ngcontent-c0] {
width: 202px;
height: 30px;
display: block;
position: absolute;
left: 25px;
top: 20px;
text-indent: -9999px;
background: url("/[object Object]") center center no-repeat;
background-size: contain; }
.menu-icon[_ngcontent-c0] {
color: #ff7300;
position: absolute;
right: 25px;
top: 25px;
cursor: pointer; }
.menu-icon.close[_ngcontent-c0] {
z-index: 10; }
.menu-icon[_ngcontent-c0]:focus {
outline: none; }
.menu-icon[_ngcontent-c0] .text[_ngcontent-c0] {
display: none; }
.header_narq[_ngcontent-c0] .header_tablet_mobile[_ngcontent-c0] .title[_ngcontent-c0] {
padding: 34px 0 0 254px;
font-size: 16px;
font-family: "Source Sans Pro";
font-weight: bold;
color: #191B1C; }
.header_narq[_ngcontent-c0] .container[_ngcontent-c0] {
padding: 0; }
.menu_responsive[_ngcontent-c0] {
color: #63544a;
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 370px !important;
z-index: 10000;
transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
-webkit-transition: -webkit-transform 166ms ease-out;
transition: -webkit-transform 166ms ease-out;
transition: transform 166ms ease-out;
transition: transform 166ms ease-out, -webkit-transform 166ms ease-out; }
.menu_responsive[_ngcontent-c0] a[_ngcontent-c0] {
display: block;
line-height: 60px;
height: 60px;
padding: 0 44px; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] {
font-family: "Source Sans Pro";
font-weight: 600;
background-color: #f3f5f5;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
overflow: auto; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .slice_icon[_ngcontent-c0] {
position: absolute;
right: 24px;
line-height: 64px;
font-size: 6px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform .25s;
transition: -webkit-transform .25s;
transition: transform .25s;
transition: transform .25s, -webkit-transform .25s; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .slice_icon.selected[_ngcontent-c0] {
-webkit-transform: rotate(0);
transform: rotate(0); }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .gradientMenu[_ngcontent-c0] {
height: 70px;
position: absolute;
width: 100%;
z-index: 1;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(rgba(255, 255, 255, 0.1)));
background-image: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0.1)); }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .scroll[_ngcontent-c0] {
padding-top: 70px;
bottom: 0; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .scroll[_ngcontent-c0] a[_ngcontent-c0] {
font-size: 22px;
color: #191B1C; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .scroll.scrollable[_ngcontent-c0] {
position: absolute;
overflow: auto;
width: 100%;
top: 0; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .acceso_clientes[_ngcontent-c0] {
line-height: 54px;
height: 54px;
padding: 0 44px;
background-color: #f96a00;
color: #FFFFFF;
font-size: 13px;
position: absolute;
bottom: 0;
width: 100%;
text-transform: uppercase; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .option_selected[_ngcontent-c0] {
line-height: 54px;
max-height: 54px;
padding: 0 44px;
color: #191B1C;
background-color: #FFFFFF;
font-size: 13px;
position: absolute;
display: block;
bottom: 54px;
width: 100%;
overflow: hidden;
text-transform: uppercase;
cursor: pointer; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .option_selected.selected[_ngcontent-c0] {
max-height: 300px;
color: #f96a00; }
.menu_responsive[_ngcontent-c0] .menu_responsive_categories[_ngcontent-c0] .menu_responsive_options[_ngcontent-c0] a[_ngcontent-c0] {
color: #191B1C;
padding: 0; }
.lang-selection[_ngcontent-c0] {
right: 40px; } }
@media only screen and (max-width: 768px) {
.header_narq[_ngcontent-c0] {
height: 108px; }
.header_narq[_ngcontent-c0] .header_tablet_mobile[_ngcontent-c0] .logo[_ngcontent-c0] {
width: 102px;
height: 54px;
top: 26px;
left: 30px;
background: url("/[object Object]") center center no-repeat;
background-size: contain; }
.menu-icon[_ngcontent-c0] {
right: 22px;
top: 40px;
font-size: 28px; }
.header_narq[_ngcontent-c0] .header_tablet_mobile[_ngcontent-c0] .title[_ngcontent-c0] {
padding: 46px 0 0 165px;
font-size: 32px; } }</style><style ng-transition="my-app-id">@charset "UTF-8";
.bk_footer[_ngcontent-c1] {
background-color: #191b1c;
min-height: 326px;
color: #fff;
font-size: 16px;
font-family: 'Source Sans Pro';
bottom: 0;
width: 100%; }
.bk_footer[_ngcontent-c1] a[_ngcontent-c1] {
color: #fff;
border-color: #fff;
text-decoration: none; }
.bk_footer[_ngcontent-c1] a[_ngcontent-c1] span.ico[_ngcontent-c1] {
color: #fff; }
.bk_footer[_ngcontent-c1] a[_ngcontent-c1]:hover {
color: #BFA38F;
border-color: #BFA38F; }
.bk_footer[_ngcontent-c1] a[_ngcontent-c1]:hover span.ico[_ngcontent-c1] {
color: #BFA38F; }
.bk_footer[_ngcontent-c1] hr[_ngcontent-c1] {
border-color: rgba(97, 112, 119, 0.3);
margin: 0; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] {
margin-bottom: 0;
margin-top: 0; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .border[_ngcontent-c1] {
border-right: 1px solid rgba(97, 112, 119, 0.3); }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .logo[_ngcontent-c1] {
margin: 0 0 58px 0;
padding-top: 68px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .logo[_ngcontent-c1] a[_ngcontent-c1] {
display: inline-block; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .logo[_ngcontent-c1] a[_ngcontent-c1] .icon-bankinter-logo[_ngcontent-c1] {
font-size: 28px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] {
margin-bottom: 60px;
background-color: transparent;
padding-right: 5px;
position: relative;
width: 100%;
float: left; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] {
float: left; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] {
display: inline-block;
margin-left: 2px;
list-style: none; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1]:before {
content: '\B7';
padding-right: 5px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1]:first-child:before {
content: ' ';
padding-right: 0; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] {
font-size: 18px;
line-height: 22px;
padding-bottom: 1px;
border-bottom: 1px solid; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] {
padding-top: 60px;
padding-left: 50px;
position: relative;
text-align: left; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] h3[_ngcontent-c1] {
font-family: 'Bankinter';
font-size: 17px;
line-height: normal;
margin-bottom: 24px;
color: #fff;
margin-top: 0; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] {
display: block;
padding-bottom: 5px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] {
font-size: 16px;
line-height: 22px;
padding-bottom: 1px;
border-bottom: 1px solid; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] {
display: inline-block;
list-style: none;
line-height: 22px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] {
float: left;
margin: 24px 0 20px 0; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1] {
margin-left: 30px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] {
width: 100%;
height: 100%;
display: block; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] span.ico[_ngcontent-c1] {
font-size: 34px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1]:first-child {
margin: 0; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.info[_ngcontent-c1] {
float: right;
margin-bottom: 20px;
width: auto;
max-width: 100%; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.info[_ngcontent-c1] li[_ngcontent-c1] {
margin: 21px 20px 0 0; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.info[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] {
border: 2px solid;
border-radius: 2px;
padding: 8px 19px 7px 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: block;
font-size: 22px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.info[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] span[_ngcontent-c1] {
display: inline-block; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.info[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] span.ico[_ngcontent-c1] {
font-size: 24px;
padding: 0 18px 0 15px;
float: left; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.info[_ngcontent-c1] li[_ngcontent-c1]:last-child {
margin-right: 0; }
@media (min-width: 1200px) {
.col-lg-6[_ngcontent-c1] {
width: 50%; } }
@media only screen and (min-width: 1200px) {
.bk_footer[_ngcontent-c1] .container[_ngcontent-c1] {
width: 1160px !important; } }
@media only screen and (max-width: 1199px) {
.bk_footer[_ngcontent-c1] .container[_ngcontent-c1] {
width: 960px !important; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] {
padding-left: 40px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] h3[_ngcontent-c1] {
margin-bottom: 12px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1] {
margin-left: 16px; } }
@media only screen and (max-width: 1199px) and (max-width: 989px) {
.bk_footer[_ngcontent-c1] {
position: relative; }
.bk_footer[_ngcontent-c1] .container[_ngcontent-c1] {
width: 740px !important; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .border[_ngcontent-c1] {
border: none; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .logo[_ngcontent-c1] {
margin: 46px 0 36px 0;
padding-top: 0;
text-align: center; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] {
margin: 0; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] {
float: none;
text-align: center; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] a[_ngcontent-c1] {
font-size: 22px !important; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] hr[_ngcontent-c1] {
position: absolute;
left: 0;
right: 0;
top: 190px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] {
padding: 86px 0 40px 0; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] h3[_ngcontent-c1] {
font-size: 26px;
line-height: 30px;
margin-bottom: 20px;
text-align: center;
padding: 0 50px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] ul[_ngcontent-c1] {
float: none;
text-align: center; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] {
padding-bottom: 15px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] {
font-size: 20px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] {
margin: 50px 0 48px 0; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] {
margin: 0;
float: none;
text-align: center; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1] {
margin-left: 22px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] span.ico[_ngcontent-c1] {
font-size: 25px; } }
@media only screen and (max-width: 767px) {
.bk_footer[_ngcontent-c1] {
overflow: hidden; }
.bk_footer[_ngcontent-c1] .container[_ngcontent-c1] {
width: 100% !important; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .border[_ngcontent-c1] {
border: none; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .logo[_ngcontent-c1] {
margin: 36px 0 27px 0;
text-align: center; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .logo[_ngcontent-c1] a[_ngcontent-c1] {
text-decoration: none; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .logo[_ngcontent-c1] a[_ngcontent-c1] .icon-bankinter-logo[_ngcontent-c1] {
font-size: 25px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] {
display: block;
text-align: center;
margin: 0;
padding-bottom: 29px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] {
float: none;
text-align: center; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] {
display: block;
margin: 0 0 17px 0; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1]:before {
display: none; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] nav[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] {
font-size: 22px;
line-height: 25px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] {
padding: 32px 0 11px 0; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1]:after {
display: none; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] h3[_ngcontent-c1] {
font-size: 24px;
line-height: 26px;
margin-bottom: 22px;
font-family: 'Source Sans Pro';
font-weight: 600; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] {
padding-bottom: 15px; }
.bk_footer[_ngcontent-c1] .footer_nav[_ngcontent-c1] .links[_ngcontent-c1] ul[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] {
font-size: 22px;
line-height: 25px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] {
margin: 25px 0 35px 0; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] {
margin: 0;
float: none;
text-align: center; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1] {
margin-left: 25px; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1]:first-child {
margin-left: 0; }
.bk_footer[_ngcontent-c1] .footer_social[_ngcontent-c1] ul.social[_ngcontent-c1] li[_ngcontent-c1] a[_ngcontent-c1] span.ico[_ngcontent-c1] {
font-size: 31px; } }</style><script>window['TRANSFER_STATE'] = {"cached":true}</script></head>
<body>
<demo-app ng-version="4.2.2"><main>
<router-outlet></router-outlet><app-layout>
<app-header _nghost-c0=""><header _ngcontent-c0="" class="header_narq">
<div _ngcontent-c0="" class="container">
<nav _ngcontent-c0="" class="menu_responsive hidden-md hidden-lg" id="nav-hamburger">
<span _ngcontent-c0="" class="menu-icon hamburger">
<i _ngcontent-c0="" aria-hidden="true" class="icon icon-hamburger" tabindex="0"></i>
<span _ngcontent-c0="" class="text">Menú</span>
</span>
<span _ngcontent-c0="" class="menu-icon close">
<i _ngcontent-c0="" aria-hidden="true" class="icon icon-cross-icon" tabindex="0"></i>
<span _ngcontent-c0="" class="text">Cerrar</span>
</span>
<div _ngcontent-c0="" class="menu_responsive_categories">
<div _ngcontent-c0="" class="gradientMenu"></div>
<!----><div _ngcontent-c0="" class="scroll">
<!----><a _ngcontent-c0="" id="cuentas_y_tarjetas_mobile" class="menu_option" className="menu_option" href="https://bancaonline.bankinter.com/banca/cuentas-tarjetas">Cuentas y Tarjetas</a><a _ngcontent-c0="" id="ahorro_e_inversion_mobile" class="menu_option" className="menu_option" href="https://bancaonline.bankinter.com/banca/ahorro-inversion">Ahorro e Inversión</a><a _ngcontent-c0="" id="hipotecas_y_prestamos_mobile" class="menu_option" className="menu_option" href="https://bancaonline.bankinter.com/banca/hipotecas-prestamos">Hipoteca y Prestamos</a><a _ngcontent-c0="" id="seguros_mobile" class="menu_option" className="menu_option" href="https://bancaonline.bankinter.com/banca/seguros/seguros-para-ti">Seguros</a>
<a _ngcontent-c0="" class="menu_option hazte_cliente" href="#">Hazte cliente</a>
</div>
<!---->
<div _ngcontent-c0="" class="option_selected children">
<span _ngcontent-c0="" class="slice_icon icon icon-dropdown-plain-icon"></span>
<span _ngcontent-c0="">Particulares</span>
<div _ngcontent-c0="" class="menu_responsive_options">
<!----><a _ngcontent-c0="" tabindex="0" target="_blank" href="https://empresas.bankinter.com/">Empresas</a><a _ngcontent-c0="" tabindex="0" target="_blank" href="https://broker.bankinter.com/">Broker</a><a _ngcontent-c0="" tabindex="0" target="_blank" href="https://www.lineadirecta.com/">Línea Directa</a>
</div>
</div>
<!----><a _ngcontent-c0="" class="acceso_clientes" href="#">Acceso clientes</a>
<!---->
</div>
</nav>
<div _ngcontent-c0="" class="lang-selection">
<ul _ngcontent-c0="">
<li _ngcontent-c0=""><a _ngcontent-c0="" class="active">ES</a></li>
<li _ngcontent-c0=""><a _ngcontent-c0="" class="active">EN</a></li>
</ul>
</div>
<div _ngcontent-c0="" class="dropdown hidden-xs hidden-sm">
<a _ngcontent-c0="" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenu2" tabindex="1">Particulares
<i _ngcontent-c0="" aria-hidden="true" class="icon icon-dropdown-plain-icon"></i>
</a>
<ul _ngcontent-c0="" aria-labelledby="dropdownMenu2" class="dropdown-menu">
<!----><li _ngcontent-c0="">
<a _ngcontent-c0="" target="_blank" href="https://empresas.bankinter.com/" tabIndex="0">Empresas</a>
</li><li _ngcontent-c0="">
<a _ngcontent-c0="" target="_blank" href="https://broker.bankinter.com/" tabIndex="1">Broker</a>
</li><li _ngcontent-c0="">
<a _ngcontent-c0="" target="_blank" href="https://www.lineadirecta.com/" tabIndex="2">Línea Directa</a>
</li>
</ul>
</div>
<div _ngcontent-c0="" class="access-menu hidden-xs hidden-sm">
<!----><div _ngcontent-c0="">
<a _ngcontent-c0="" class="btn btn-primary btn-inverted btn-sm" href="#">Hazte cliente</a>
<a _ngcontent-c0="" class="btn btn-primary btn-sm" href="#">Acceso clientes</a>
</div>
<!---->
<div _ngcontent-c0="" class="clearfix"></div>
</div>
<div _ngcontent-c0="">
<div _ngcontent-c0="" class="header_tablet_mobile hidden-md hidden-lg">
<a _ngcontent-c0="" class="logo" href="/" tabindex="0">Bankinter</a>
<span _ngcontent-c0="" class="menu-icon hamburger">
<i _ngcontent-c0="" aria-hidden="true" class="icon icon-hamburger" tabindex="0"></i>
<span _ngcontent-c0="" class="text">Menú</span>
</span>
<div _ngcontent-c0="" class="title">Bankinter</div>
</div>
<div _ngcontent-c0="" class="container visible-md-block visible-lg-block" id="adjust">
<div _ngcontent-c0="" class="header_logo">
<div _ngcontent-c0="" class="logo pull-left hidden" id="logo_IE_min">
<a _ngcontent-c0="" href="/" tabindex="0">
<img _ngcontent-c0="" alt="logo Bankinter" class="logo_IE" src="../assets/images/logo_bk.svg">
<img _ngcontent-c0="" alt="logo Bankinter reducido" class="logo_IE_min hidden" src="../assets/images/logo_bk_min.svg">
</a>
</div>
<div _ngcontent-c0="" class="logo pull-left" id="logo">
<a _ngcontent-c0="" href="/" tabindex="0">
<svg _ngcontent-c0="" data-name="logo_SVG" id="logoSVG" viewBox="0 0 215 32" xmlns="http://www.w3.org/2000/svg">
<path _ngcontent-c0="" d="M12.5 32c8.2 0 12.4-2.4 12.4-11.2 0-8-3-11.6-11.2-11.6-3.6 0-6 0.4-7.9 1.9v-11.1h-5.8v21.1c0 8.1 3.6 10.9 12.5 10.9v0zM12.4 27.7c-6 0-6.9-0.9-6.9-7.7 0-5.8 1.9-6.6 6.6-6.6s6.7 0.7 6.7 6.6c0.1 6.6-1 7.7-6.4 7.7z" id="logo_b"></path>
<path _ngcontent-c0="" d="M91.1 22.6v9h-5.8v-31.6h5.8v17.6h1.1c0.1 0 0.2 0 0.2 0 1.3 0 2.5-0.6 3.3-1.5l6.7-6.7h6.7l-10.1 10.4 11 11.6h-7.5l-7.1-7.7c-0.6-0.8-1.6-1.4-2.7-1.4-0.2 0-0.5 0-0.7 0.1h-0.9v0.2z" id="logo_k"></path>
<path _ngcontent-c0="" d="M209.6 26h5.8v5.6h-5.8v-5.6zM62.1 31.6v-13.8c0-3.4 1.1-4.3 6.2-4.3s6.2 0.9 6.2 4.3v13.8h5.8v-14.2c0-6.4-4.5-8.4-10.9-8.4h-1.9c-6.4 0-11 2.1-11 8.4v14.2h5.6zM129.1 31.6v-13.8c0-3.4 1.1-4.3 6-4.3s6.2 0.9 6.2 4.3v13.8h5.8v-14.2c0-6.4-4.7-8.4-10.9-8.4h-2.1c-6.4 0-10.9 2.1-10.9 8.4v14.2h5.9zM167.5 13.8h-9.7v10.9c0 2.1 1.5 2.8 3.9 2.8 0.2 0 0.4 0 0.7 0 1.9 0 3.7-0.2 5.5-0.6l-0.2 4c-2 0.5-4.3 0.9-6.7 0.9-6.4 0-8.8-2.6-8.8-6.7v-22.7h5.6v7.1h9.7c0 0 0 4.3 0 4.3zM199.5 16.7c0-6 4.3-7.7 8.2-7.7 1.9 0 6.7 0.2 7.7 0.4v4.3h-6.2c-3.2 0-3.9 0.4-3.9 3.4v14.6h-5.8v-15zM112.3 9.5h5.8v22.1h-5.8c0 0 0-22.1 0-22.1zM45.8 17.6v-1.1c0-2.6-1.7-3-6.2-3-0.1 0-0.3 0-0.5 0-3.3 0-6.5 0.5-9.5 1.6l0.2-4.2c3.1-1.2 6.5-1.9 10-1.9 6.4 0 11.8 0.9 11.8 8.2v6.8c0 7.9-6.4 8-11.8 8-7.9 0-11.8-2.2-11.8-6.7 0.3-6.2 4-7.3 17.8-7.7v0 0zM40.2 27.7c4.3 0 5.6-0.6 5.6-2.8v-3.6l-5.2 0.2c-5.2 0.4-6.5 1.1-6.5 2.8 0 2.8 0.9 3.4 6.1 3.4v0 0zM112.3 0h5.8v5.6h-5.8v-5.6zM180 19.1c7.7-0.4 8.8-0.9 8.8-2.8s-1.3-3-5.6-3c-5.6 0-6.2 1.1-6.2 6l3-0.2zM177 23.4c0.4 2.8 1.7 4.3 6.2 4.3 0.2 0 0.4 0 0.6 0 3.7 0 7.2-0.6 10.5-1.8l-0.2 4c-3.2 1.3-6.8 2-10.7 2.1-9.4 0-12.5-2.4-12.5-11.8 0-8.2 2.6-11.2 12.4-11.2 8 0 11.6 2.6 11.8 7.3-0.1 5.6-4 6.9-18.1 7.1v0 0z" id="logo_rest"></path>
</svg>
<span _ngcontent-c0="" id="logo_punto"></span>
</a>
</div>
<div _ngcontent-c0="" class="clearfix"></div>
</div>
</div>
<nav _ngcontent-c0="" class="nav-menu hidden-xs hidden-sm">
<div _ngcontent-c0="" class="container">
<!---->
<!----><ul _ngcontent-c0="">
<!----><li _ngcontent-c0=""><a _ngcontent-c0="" target="_blank" href="https://bancaonline.bankinter.com/banca/cuentas-tarjetas">Cuentas y Tarjetas</a></li><li _ngcontent-c0=""><a _ngcontent-c0="" target="_blank" href="https://bancaonline.bankinter.com/banca/ahorro-inversion">Ahorro e Inversión</a></li><li _ngcontent-c0=""><a _ngcontent-c0="" target="_blank" href="https://bancaonline.bankinter.com/banca/hipotecas-prestamos">Hipoteca y Prestamos</a></li><li _ngcontent-c0=""><a _ngcontent-c0="" target="_blank" href="https://bancaonline.bankinter.com/banca/seguros/seguros-para-ti">Seguros</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
</app-header>
<div class="container" id="container">
<router-outlet></router-outlet><app-home><section class="row">
<div class="col-xs-12">
<article>
<h1 i18n="">Demo of new architecture</h1>
<p i18n="">Application that demostrates all the capabilities available in the new architecture.</p>
</article>
</div>
</section>
</app-home>
</div>
<app-footer _nghost-c1=""><footer _ngcontent-c1="" class="bk_footer hidden-launcher">
<div _ngcontent-c1="" class="container">
<div _ngcontent-c1="" class="row footer_nav">
<div _ngcontent-c1="" class="col-xs-12 col-md-6 border">
<div _ngcontent-c1="" class="logo">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/banca/hipotecas-prestamos/hipotecas#" tabindex="0">
<span _ngcontent-c1="" aria-hidden="true" class="icon-bankinter-logo"></span>
<span _ngcontent-c1="" class="sr-only">Inicio - Bankinter.</span>
</a>
</div>
<nav _ngcontent-c1="" aria-label="Menú Pie de Página">
<ul _ngcontent-c1="">
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/banca/nav/anuncios-tarifas" tabindex="0">Anuncios y tarifas</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/banca/nav/seguridad" tabindex="0">Seguridad</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/banca/nav/aviso-legal" tabindex="0">Aviso legal</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/banca/nav/accesibilidad" tabindex="0">Accesibilidad</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/banca/nav/sitemap" tabindex="0">Mapa Web</a>
</li>
</ul>
</nav>
</div>
<hr _ngcontent-c1="" class="visible-sm">
<div _ngcontent-c1="" class="col-xs-12 col-sm-6 col-md-3 links">
<h3 _ngcontent-c1="">Acerca de Bankinter</h3>
<ul _ngcontent-c1="">
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://webcorporativa.bankinter.com/www/es-es/cgi/ebk+gwc+home" tabindex="0" target="_blank">Web corporativa</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/banca/nav/atencion-cliente" tabindex="0">Atención al cliente</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://www.fundacionbankinter.org/" tabindex="0">Fundación Innovación</a>
</li>
</ul>
</div>
<div _ngcontent-c1="" class="hidden-xs col-sm-6 col-md-3 links">
<h3 _ngcontent-c1="">Soluciones personalizadas</h3>
<ul _ngcontent-c1="">
<li _ngcontent-c1="">
<a _ngcontent-c1="" alt="Banca personal" href="https://bancaonline.bankinter.com/banca/nav/banca-personal" tabindex="">Banca personal</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" alt="Banca privada" href="https://bancaonline.bankinter.com/banca/nav/banca-privada" tabindex="">Banca privada</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" alt="Particulares" href="https://bancaonline.bankinter.com/banca/nav/banca-particulares" tabindex="">Particulares</a>
</li>
</ul>
</div>
</div>
</div>
<hr _ngcontent-c1="">
<div _ngcontent-c1="" class="container">
<div _ngcontent-c1="" class="row footer_social">
<ul _ngcontent-c1="" class="col-xs-12 col-md-3 social">
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://www.facebook.com/bankinter?sk=info" tabindex="0" target="_blank">
<span _ngcontent-c1="" aria-hidden="true" class="ico icon-facebook"></span>
<span _ngcontent-c1="" class="sr-only">Facebook</span>
</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://twitter.com/Bankinter" tabindex="0" target="_blank">
<span _ngcontent-c1="" aria-hidden="true" class="ico icon-twitter"></span>
<span _ngcontent-c1="" class="sr-only">Twitter</span>
</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://es.linkedin.com/company/bankinter" tabindex="0" target="_blank">
<span _ngcontent-c1="" aria-hidden="true" class="ico icon-linkedin"></span>
<span _ngcontent-c1="" class="sr-only">Linkedin</span>
</a>
</li>
</ul>
<ul _ngcontent-c1="" class="col-md-9 hidden-xs hidden-sm info">
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/publico/buscador_oficinas_cajeros.xhtml" tabindex="0">
<span _ngcontent-c1="">Cajeros y Oficinas</span>
<span _ngcontent-c1="" class="ico icon-map-icon"></span>
</a>
</li>
<li _ngcontent-c1="">
<a _ngcontent-c1="" href="https://bancaonline.bankinter.com/banca/hipotecas-prestamos/hipotecas#" tabindex="0">
<span _ngcontent-c1="">902 365 563</span>
<span _ngcontent-c1="" aria-hidden="true" class="ico icon-phone-icon"></span>
<span _ngcontent-c1="" class="sr-only">Contacta por teléfono</span>
</a>
</li>
</ul>
</div>
</div>
</footer>
</app-footer>
</app-layout>
</main>
</demo-app>
External libraries:
The Problem
External libraries:
The solution
ngOnInit (){
if (isBrowser){
this.showRecaptcha = true;
}
this.dominioKey = this._recaptcha.dominioKey;
if (!this.friend){
this.friend = new Friend();
this.friend.name='';
this.friend.surname='';
this.friend.tel='';
this.friend.email='';
}
}@Component({
selector: 'arch-carosel',
templateUrl: 'carosel.component.html'
})
export class ArchCaroselComponent {
@Input()
public config: CaroselConfig
public browser: boolean = isBrowser;
}External libraries:
How it is now
Exceptions:
The Problem
this.http.get('http://some/url')
.map(response => response.json())
.catch(error => Observable.throw(error));
--------------------------------------------
observable.subscribe(
data => { //Do something with the data },
error => { throw new Error(error); }
);
--------------------------------------------
methodWithCallBack(input, (err, result) => {
if (err) throw new Error(err);
//Other things
});Exceptions:
The Problem
this.http.get('http://some/url')
.map(response => response.json())
.catch(error => Observable.throw(error));
--------------------------------------------
observable.subscribe(
data => { //Do something with the data },
error => { throw new Error(error); }
);
--------------------------------------------
methodWithCallBack(input, (err, result) => {
if (err) throw new Error(err);
//Other things
});
Exceptions:
The Solution
process.on('uncaughtException', function (err) { console.error('Error: ',err); });
Exceptions:
How it is now
Put in production
Container Docker
Process manager
Web server express
Angular app
meets
https://www.npmjs.com/package/eureka-js-client
Examples in production
https://www.solvia.es/es/home/1
