Angular material on angular 8 CSS query

Question

Currently, working on an angular material mat table, I am unable to position the mat table in the center of the website. It is completely spread across. and one more challenge is to get the icon. When it is active i am looking to have an green icon and when idle, it is of gray icon.

Can someone help me with it please.

Current snip:

Excepted snip:

I have create a component for the this table. Here are my tablemapping.component.html

'''code

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>

<!-- Application Column -->
  <ng-container matColumnDef="Application">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Application </th>
    <td mat-cell *matCellDef="let row"> {{row.Application}} </td>
  </ng-container>

  <!-- TR0 Column -->
  <ng-container matColumnDef="TR0">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> TR0 </th>
    <td mat-cell *matCellDef="let row"> {{row.TR0}} </td>
  </ng-container>

  <!-- TR1 Column -->
  <ng-container matColumnDef="TR1">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> TR1 </th>
    <td mat-cell *matCellDef="let row"> {{row.TR1}} </td>
  </ng-container>

  <!-- TR2 Column -->
  <ng-container matColumnDef="TR2">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> TR2 </th>
    <td mat-cell *matCellDef="let row"> {{row.TR2}} </td>
  </ng-container>

    <!-- TR3Column -->
    <ng-container matColumnDef="TR3">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> TR3 </th>
        <td mat-cell *matCellDef="let row"> {{row.TR3}} </td>
      </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

'''
 Here is my ts file:

'''code




  import { Component, Inject, OnInit, ViewChild } from '@angular/core';
    import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
    import { MatSort, MatTableDataSource } from '@angular/material';
    import { merge } from 'rxjs';
    import { UserService } from '../user.service'

    export interface User {
      application: string;
      tr0: string;
      tr1: string;
      tr2: string;
      tr3: number
      }
    @Component({
      selector: 'app-table',
      templateUrl: 'tablemapping.component.html',
      styles: [
        `
          table {
            width: 100%;
          }

          mat-icon {
            cursor: pointer;
          }

          th.mat-sort-header-sorted {
            color: black;
          }

        `
      ]
    })
    export class tablemapping implements OnInit {
      [x: string]: any;
      displayedColumns: string[] = ['Application', 'TR0', 'TR1', 'TR2', 'TR3'];
      dataSource;
      user;
      users: User[];
      constructor(private userService:UserService,public dialog: MatDialog){}
       
      ngOnInit() {
         console.log("Super Star");

        this.userService.getUsers()
          .subscribe((users: User[]) => {
            this.users = users;
            console.log(this.users);
            console.log(JSON.stringify(this.users));
            // const temp = JSON.parse(users);
           this.dataSource = new MatTableDataSource(users);
           // this.dataSource.sort = this.sort;
          });
      }
    }

'''

use a div and wrap your table inside that div with width and height? — Prashant Pimpale, Feb 08 '20 at 03:45
@PrashantPimpale i will try with div and some padding and width, Any idea on the column level icon with conditions based on the data? — Abhinay, Feb 08 '20 at 03:56
what you mean by - Any idea on the column level icon with conditions based on the data? Or edit icon? or delete icon? — Prashant Pimpale, Feb 08 '20 at 04:02
If you see my question, i have asked for some help and suggestion.. in my table.. when it is active. i am looking for an green icon beside it in the coloumn. Please refer to my question current and excepted snip — Abhinay, Feb 08 '20 at 04:03
Check this: https://stackblitz.com/edit/angular-mbruis-zvbci8 — Prashant Pimpale, Feb 08 '20 at 04:07

Prashant Pimpale · Accepted Answer · 2020-02-10T05:25:28.707

2

Wrap your table inside <div> element, like

<div class="container">
   .. your table and heading block
</div>

then in CSS:

.container {
  margin: 15px; --- it will add margin for four side to that div element
}

and to show active with the green colour dot:

Inside td:

<td>
  <span [ngClass]="{'active-dot': element.status == 'Active', 'idle-dot':  element.status == 'Idle' }"></span>
   {{element.status}} 
</td>

CSS:

.active-dot {
  height: 15px;
  width: 15px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}

.idle-dot {
  height: 15px;
  width: 15px;
  background-color: gray;
  border-radius: 50%;
  display: inline-block;
}

Working_Demo

edited Feb 10 '20 at 05:25

answered Feb 08 '20 at 03:54

Prashant Pimpale

10,349
9
44
84

thanks @prashant, But one question, I am beginner in angular.. once i make this changes i have to make this css in styles.css not in the css of component... If i add this css in component css it is not reflecting.. but when added in stycles.css it is working.. – Abhinay Feb 08 '20 at 04:09
hey @prashant.. just looking for other other part of the questions.. – Abhinay Feb 08 '20 at 14:53

Angular material on angular 8 CSS query

1 Answers1