rakia

import { Component, HostListener } from '@angular/core';
import { MatSnackBar } from "@angular/material";

export interface MouseEvent {
  rowId:     number;
  colId:     number;
  cellsType: string;
}

export interface PeriodicElement {

rakia

/*---- Remove default browser behaviour after selecting cells ----*/
.selected, .unselected {
  -webkit-user-select: none; /* Webkit  */
  -moz-user-select:    none; /* Firefox */
  -ms-user-select:     none; /* IE 10   */
  -o-user-select:      none; /* Opera   */
  user-select:         none;
}

rakia

/**
   * NOTE: nbRows    of selectedCellsState must = nbRows of the tabl
   * nbColumns of selectedCellsState must = nbColumns of all selectable cells in the table
   */
  selectedCellsState: boolean[][] = [
    [false, false, false],
    [false, false, false],
    [false, false, false],
    [false, false, false],
    [false, false, false],

rakia

  onMouseDown(rowId: number, colId: number, cellsType: string) {

    this.tableMouseDown = {rowId: rowId, colId: colId, cellsType: cellsType};
  }

  onMouseUp(rowId: number, colId: number, cellsType: string) {

    this.tableMouseUp = {rowId: rowId, colId: colId, cellsType: cellsType};
    if(this.tableMouseDown) {
      this.newCellValue = '';

rakia

<ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell (mousedown)="onMouseDown(i, 1, 'name')" (mouseup)="onMouseUp(i, 1, 'name')" *matCellDef="let element; let i = index"
        [ngClass]="{'selected': selectedCellsState[i][1], 'unselected': !selectedCellsState[i][1]}">
      {{element.name}}
    </td>
</ng-container>

rakia

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

export interface PeriodicElement {
  name:     string;
  position: number;
  weight:   number;
  symbol:   string;
}

const ELEMENT_DATA: PeriodicElement[] = [

rakia

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

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">

rakia

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

rakia

import { BrowserModule           } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule                } from '@angular/core';
import { MatSnackBarModule, MatTableModule } from '@angular/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [

rakia

<div class="todo-list">
  <div fxLayout="row wrap" fxLayoutGap="10px">

    <mat-card class="todo-card" *ngFor="let todo of todoList" fxFlex [class.mat-elevation-z8]>
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>{{todo.id}} - {{todo.name}}</mat-card-title>
        <mat-card-subtitle>Type: {{todo.type}}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>