# Dockerfile | |||||
### STAGE 1: Build ### | |||||
# We label our stage as 'builder' | |||||
FROM node:12-alpine as builder | |||||
COPY package*.json ./ | |||||
RUN npm set progress=false && npm config set depth 0 && npm cache clean --force | |||||
## Storing node modules on a separate layer will prevent unnecessary npm installs at each build | |||||
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app | |||||
WORKDIR /ng-app | |||||
COPY . . | |||||
RUN npm run build:ssr | |||||
### STAGE 2: Setup ### | |||||
#FROM nginx:1.13.3-alpine | |||||
FROM node:12-alpine | |||||
ENV PORT=4100 | |||||
COPY --from=builder /ng-app/dist /dist | |||||
WORKDIR / | |||||
EXPOSE 4100 | |||||
RUN node dist/server/main.js |
import { Component, OnInit, ContentChildren, Input, ViewChildren, TemplateRef } from '@angular/core'; | import { Component, OnInit, ContentChildren, Input, ViewChildren, TemplateRef } from '@angular/core'; | ||||
import { TabsComponent } from '../tabs/tabs.component'; | |||||
import { Template } from '@angular/compiler/src/render3/r3_ast'; | |||||
@Component({ | @Component({ | ||||
templateUrl: 'tab.component.html', | templateUrl: 'tab.component.html', | ||||
selector: 'app-tab', | selector: 'app-tab', |
export class TabsComponent implements OnInit, AfterContentInit { | export class TabsComponent implements OnInit, AfterContentInit { | ||||
faNewspaper = faNewspaper; | faNewspaper = faNewspaper; | ||||
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>; | @ContentChildren(TabComponent) tabs: QueryList<TabComponent>; | ||||
@ContentChildren(TabComponent) activeTab: TabComponent; | |||||
public selectTab(tab: TabComponent): void { | public selectTab(tab: TabComponent): void { | ||||
// set direciton for aninmation | // set direciton for aninmation | ||||
tab.direction = this.getTabAnimationDirection(tab); | tab.direction = this.getTabAnimationDirection(tab); | ||||
// deactivate all tabs | // deactivate all tabs | ||||
this.tabs.toArray().forEach(tab => tab.active = false); | |||||
this.tabs.toArray().forEach(tab => { | |||||
tab.active = false | |||||
}); | |||||
// activate the tab the user has clicked on. | // activate the tab the user has clicked on. | ||||
tab.active = true; | tab.active = true; | ||||
constructor() { } | constructor() { } | ||||
ngOnInit(): void { | ngOnInit(): void { | ||||
} | } | ||||
} | } |
align-self: center; | align-self: center; | ||||
} | } | ||||
.not-found { | |||||
width: 160em; | |||||
height: 10em; | |||||
} | |||||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||||
.filter-bar { | .filter-bar { | ||||
flex-flow: column; | flex-flow: column; |