Angular [ngStyle], [style] - Various ways to use: Directly, Method, Object, Conditionally/Dynamically

How to use Angular ngStyle

1. Component - HTML

<div [style.height.px]="90" [style.background-color]="'yellow'">ngStyle - Specific style attributes - [style]</div>

<div [ngStyle]="{'backgroundColor': flag === true ? 'blue' : 'purple','height':'90px'}">ngStyle - Dynamically - use component's property</div>

<div [ngStyle]="{'backgroundColor': 'green','height':'90px'}">ngStyle - Directly</div>

<div [ngStyle]="ngStyleObject"> ngStyle - Use component object property with all css</div>

<div [ngStyle]="getStyle()"> ngStyle - Use component method </div>

2. Component - TS

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  flag = false;

  ngStyleObject = {

    ['backgroundColor']: 'red',

     ['height']: '90px'

  };

  ngStyleMethod = {

    height: '90px',

    backgroundColor: 'orange'

  }

  getStyle(): any {

    return this.ngStyleMethod;

  }

}

Custom Expand/Collapse mat-card with ngStyle,CSS

Custom Material Card expand/collapse

After clicking down arrow -->

After clicking down arrow again, show 1st screen.

Prerequisites:

@angular/material v8.2.3

1. Container component - html

<div style="height: 33vh;"  fxLayout="row" fxLayoutAlign="center center">
        <p> Some component....</p>
</div>
<jhi-your-card></jhi-your-card>

2. Card component - html

<div  [ngStyle]="myCardStyle" class="main-container" style="color: #1f69c0">

    <mat-card>

        <div>

            <div *ngIf="isExpanded" fxLayout="row" fxLayoutAlign="start center">

                <button (click)=collapseCard() type="button" mat-icon-button matSuffix style="color: #1f69c0">

                    <mat-icon>keyboard_arrow_down</mat-icon>

                </button> Close

            </div>

            <div class="some-label">

                Label 1

            </div>

            <div fxLayout="row" fxLayoutAlign="start center" class="margin">

                <div class="comp-stuff" fxFlex="80" style="color: #1f69c0">

                    Component stuff

                </div>

            </div>

            <div *ngIf="!isExpanded" class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">

                <div fxFlex="53"></div>

                <div fxFlex="47" fxLayoutAlign="end">

                    <button mat-button class="bottom-links full-width">Click Me

                    </button>

                </div>

            </div>

        </div>

        <br/>

        <div *ngIf="!isExpanded" fxLayout="row" fxLayoutAlign="center center">

            <button (click)=expandCard() type="button" mat-icon-button matSuffix style="color: #1f69c0">

                <mat-icon>keyboard_arrow_down</mat-icon>

            </button>

        </div>

    </mat-card>

</div>

3. Card component - css 

.main-container {
  padding: 5px;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
}
.full-width {
  width: 100%;
}
.button-margin {
  margin-right: 1.5vh;
}
mat-icon {
  margin-left: 1vw;
  margin-top: 1vw;
  font-size: 2.5vh;
}
mat-card {
  background-color: white;
  width: 95%;
  margin-bottom: 11vh;
  padding: 3.5vh;
}
.some-label {
  font-size: 2.08vh;
  color: lightgray;
}
.mat-button {
  background-color: darkgray;
  border-radius: 20px;
}
.comp-stuff {
  font-size: 4.48vh;
}
.bottom-links {
  font-size: 2.08vh;
  color: white;
}
.margin {
  margin-bottom: 1.5vh;
}
button {
  overflow-x: hidden !important;
}

4. Card component - ts

import {Component, OnInit} from '@angular/core';

@Component({

  selector: 'jhi-your-card',

  templateUrl: './your-card.component.html',

  styleUrls: ['./your-card.component.scss']

})

export class YourCardComponent implements OnInit {

  public myCardStyle = {};

  isExpanded = false;

  expandedCardStyle = {

    ['position']: 'absolute',

    ['z-index']: '10',

    ['top']: '0',

    ['left']: '0',

    ['width']: '100%',

    ['height']: '90%'

  };

  constructor() {}

  ngOnInit(): void {}

  expandCard(): void {

    this.myCardStyle = this.expandedCardStyle;

    this.isExpanded = true;

  }

  collapseCard(): void {

    this.myCardStyle = {};

    this.isExpanded = false;

  }

}

HTML blueprint for Angular Flex Layout / Material

Kick-off blueprint for HTML/CSS design with Angular Flex Layout and Angular Material

Prerequisites:


@angular/flex-layout v9.0.0

@angular/material v8.2.3

1. HTML

     
  

  <div class="wrap-container">

         <div class="main-container" fxLayout="column" fxLayoutAlign="space-between center" fxLayoutGap="25vh">
            <div style="width:100%;">
                <div class="money-label">
                    Account balance
                </div>
                <div fxLayout="row" fxLayoutAlign="start center" class="margin">
                    <div class="free-money" fxFlex="80">
                        + 11.500 Euro
                    </div>
                    <div fxFlex="20" fxLayoutAlign="end">
                        <mat-icon>check_circle</mat-icon>
                    </div>
                </div>
                <div class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">
                    <div fxFlex="47">
                        <button mat-button class="bottom-links full-width">Analysis</button>
                    </div>
                    <div fxFlex="6"></div>
                    <div fxFlex="47" fxLayoutAlign="end">
                        <button mat-button class="bottom-links full-width">Profile</button>
                    </div>
                </div>
            </div>

            <div class="transaction-entry">
                <div fxLayout="row" fxLayoutAlign="start center" class="margin-top">
                    <div class="top-body" fxFlex="80">
                        Mo. | 16.5.2020 | 12:30
                    </div>
                </div>
                <div class="bottom-body" fxLayout="row" fxLayoutAlign="start end">
                    <div fxFlex="80">
                        Transaction #1:
                    </div>
                    <div fxFlex="20" fxLayoutAlign="end">
                        - 38,00
                    </div>
                </div>
            </div>

            <div style="width:100%;text-align: center">
                <button mat-button class="bottom-links full-width">Submit</button>
            </div>

         </div>
      </div>
     






2. CSS



 .wrap-container {

  height: 100%;
 }

.main-container {
  padding: 20px;
}

.full-width {
  width: 100%;
}

.button-margin {
  margin-right: 1.5vh;
}

mat-card {
  background-color: white;
  height: 100%;
  width: 100%;
  padding: 13.5vh;
}

.money-label {
  font-size: 2.08vh;
  color: lightgray;
}

.mat-button {
  background-color: orangered;
}

.free-money {
  font-size: 4.48vh;
}

.bottom-links {
  font-size: 2.08vh;
  color: white;
}

.margin {
  margin-bottom: 1.5vh;
}

button {
  overflow-x: hidden !important;
}

.transaction-entry {
  width: 100%;
}

.top-body {
  font-size: 2.08vh;
  color: lightgray;
}

.margin-top {
  margin-bottom: 0.5vh;
}

.bottom-body {
  font-size: 2.08vh;
  font-weight: bold;
}