Angular материал по запросу angular 8 CSS

Question

В настоящее время, работая над таблицей матов angular, я не могу разместить таблицу матов в центре веб-сайта. Это полностью распространено через. и еще одна задача - получить иконку. Когда он активен, у меня, похоже, зеленый значок, а в режиме ожидания - серый.

Может ли кто-нибудь помочь мне с этим, пожалуйста.

Текущий фрагмент:

Исключенный фрагмент:

Я создал компонент для этой таблицы. Вот мой tablemapping.component. html

'' 'код

    <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;
          });
      }
    }

' ''

Answer 1

Оберните таблицу внутри элемента <div>, например

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

, затем в CSS:

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

и покажите active с зеленой точкой:

Внутри тд:

<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