| # 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; |