angular-material – Angular Questions

angular, angular-material, angular5, typescript Dec 18,2018

I created a new sidenav in StackBlitz and I want to adapt it to my project of Angular Material. Where to start?

Scenario :

Recently with the help of the community and seeing examples I got the sidenav that I wanted to use in my project.
The problem is that I did it in Stackblitz and I have a hard time
adapting it to my current project so that I have this new sidenav.
This is the sidenav in stackblitz: Stackblitz sidenav

Question :
Is there any way to pass the component that I have stackblitz to my component already created in the project (Which has its respective methods and functions) without having to erase what I already have?
And here’s my project code:

app-header.component.html

<!--- Toolbar starts here-->
<div class="container-toolbar">
<mat-toolbar color="primary" class="fixed-header">

<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span class="spacer"></span>
<button type="button" mat-icon-button href="">
<mat-icon matTooltip="Salir">exit_to_app</mat-icon>
</button>


</mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
  <mat-sidenav #drawer fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 2;">
   		<mat-nav-list>
        <mat-list-item>
          <a routerLink="/dashboard">Static 1</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/parametros">Static 2</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Static 3</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Static 4</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">No static</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
			<div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
              <a routerLink="/#">Options 1</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Options 2</a>
                </mat-list-item>
        <h2 matSubheader class="mat-submenu-title"><mat-icon>account_balance</mat-icon>  Test</h2>
				<mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
					<span class="full-width" *ngIf="isExpanded || isShowing">Test</span>
					<mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
				</mat-list-item>
				<div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
            <a routerLink="/topupcard">test</a>
            </mat-list-item>
            <mat-list-item>
              <a routerLink="/#">test</a>
              </mat-list-item>
            <h2 matSubheader class="mat-submenu-title"><mat-icon>card_travel</mat-icon> test</h2>
            <mat-list-item>
              <a routerLink="/#">test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">test</a>
                </mat-list-item>
        </div>

			</div>
		</mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

App-header.component.ts

import { Component, ViewChild } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.css']
})
export class AppHeader {
 isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

  @ViewChild('sidenav') sidenav: MatSidenav;
  isExpanded = true;
  showSubmenu = false;
  isShowing = false;
  showSubSubMenu = false;

  onmouseenter() {
    if (!this.isExpanded) {
      this.isShowing = true;
    }
  }

  onmouseleave() {
    if (!this.isExpanded) {
      this.isShowing = false;
    }
  }

}

I used schematics at the beginning to create it,
But then I modified it to be able to have the front as I wanted it.

I have tried to adapt it several times, but the amount of errors it gives me are so many that I do not know where to start. I have little time working with angular, if someone could tell me where to start …

Source: Angular

by 13design

angular, angular-material, angular-material2, typescript Dec 18,2018

Two different format mat-datepicker – Reactive Forms

I am trying to have a custom date picker which the user can either select year and month, or switch and select a custom date range. I have set the MAT_DATE_FORMATS to be MM/YYYY which is over riding the custom date picker which should be DD/MM/YYYY. They are both wrapped in a FormGroup.

HTML

<form [formGroup]="multiDateForm">
  <mat-radio-group fxFlex="85px" class="radio-group" formControlName="dateSelection" id="dateSelection">
    <mat-radio-button class="radio-button" [value]="DateType.Monthly">Monthly</mat-radio-button>
    <mat-radio-button class="radio-button" [value]="DateType.Custom">Custom</mat-radio-button>
  </mat-radio-group>

  <mat-form-field *ngIf="multiDateForm.value.dateSelection === DateType.Monthly">
    <input matInput [matDatepicker]="dp" placeholder="Month and Year" formControlName="monthSelector">
    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
    <mat-datepicker #dp
                (monthSelected)="chosenMonthHandler($event, dp)"
                startView="multi-year"
                panelClass="example-month-picker">
    </mat-datepicker>
  </mat-form-field>

  <div formGroupName="customerSelectorGroup" fxFlex="20" *ngIf="multiDateForm.value.dateSelection === DateType.Custom">
    <mat-form-field fxFlex="100">
      <input matInput placeholder="Choose a start date"  formControlName="customStartDateSelector" id="customStartDateSelector">
      <mat-datepicker-toggle matSuffix [for]="pickerstart" ></mat-datepicker-toggle>
      <mat-datepicker #pickerstart disabled="false"></mat-datepicker>
    </mat-form-field>

    <mat-form-field fxFlex="100" style="margin-left: 5px;">
      <input matInput [matDatepicker]="pickerend" placeholder="Choose a end date" formControlName="customEndDateSelector" id="customEndDateSelector">
      <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
      <mat-datepicker #pickerend></mat-datepicker>
    </mat-form-field>
  </div>
</form>

TS File

enum DateType {
  Monthly,
  Custom,
}

export const dateFormats = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'multi-date-picker',
  templateUrl: './multi-date-picker.component.html',
  styleUrls: ['./multi-date-picker.component.scss'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: dateFormats},
  ],
})
export class MultiDatePickerComponent implements OnInit {

  public dateType: DateType = DateType.Monthly;
  public DateType = DateType;
  public multiDateForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.multiDateForm = new FormGroup({
      dateSelection: new FormControl(DateType.Monthly),
      monthSelector: new FormControl(moment()),
      customerSelectorGroup: new FormGroup({
        customStartDateSelector: new FormControl(),
        customEndDateSelector: new FormControl(),
      }),
    });

    this.multiDateForm.get('monthSelector').valueChanges.subscribe(value => this.watchMonthPicker(value));
  }

  chosenMonthHandler(normalisedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    const monthSelectorControlOperator = this.multiDateForm.get('monthSelector');
    monthSelectorControlOperator.setValue(normalisedMonth);
    datepicker.close();
  }

  watchMonthPicker(value: Moment) {
  }
}

Source: Angular

by 13design

angular, angular-cdk, angular-material Dec 18,2018

My project using angular CLI 1.7.4 what will be the right Angular Material version to install?

My Project is built on Angular CLI 1.7.4
While running the command “ng serve”, Am getting the below errors:
I understand this is because of angular material is missing from the project.
Kindly guide me on which angular Material version will be the best suited for my project.
Please find the error messages below:

ERROR in node_modules/@angular/flex-layout/flex/typings/flex-offset/flex-offset.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/flex-layout/flex/typings/layout-gap/layout-gap.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts(9,41): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/autocomplete/typings/autocomplete.d.ts(10,44): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(9,43): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/button/typings/button.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/button/typings/button.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/checkbox/typings/checkbox.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/chips/typings/chip-list.d.ts(8,33): error TS2307: Cannot find module '@angular/cdk/a11y'.node_modules/@angular/material/chips/typings/chip-list.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/bidi'.node_modules/@angular/material/chips/typings/chip-list.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/chips/typings/chip.d.ts(8,33): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/core/typings/ripple/ripple-renderer.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/core/typings/ripple/ripple.d.ts(8,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/datepicker/typings/calendar.d.ts(7,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/datepicker/typings/datepicker.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/datepicker/typings/datepicker.d.ts(9,67): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/dialog/typings/dialog-config.d.ts(9,27): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/dialog/typings/dialog-config.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/dialog/typings/dialog-container.d.ts(10,84): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/dialog/typings/dialog-container.d.ts(11,34): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/dialog/typings/dialog-ref.d.ts(8,28): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/dialog/typings/dialog.d.ts(1,59): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/dialog/typings/dialog.d.ts(2,31): error TS2307: Cannot find module '@angular/cdk/portal'.node_modules/@angular/material/expansion/typings/accordion.d.ts(1,30): error TS2307: Cannot find module '@angular/cdk/accordion'.
node_modules/@angular/material/expansion/typings/expansion-panel-header.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(10,34): error TS2307: Cannot find module '@angular/cdk/accordion'.
node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(11,43): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/expansion/typings/expansion-panel.d.ts(12,32): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/grid-list/typings/grid-list.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/input/typings/autosize.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/input/typings/input.d.ts(1,26): error TS2307: Cannot find module '@angular/cdk/platform'.node_modules/@angular/material/list/typings/selection-list.d.ts(8,50): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/list/typings/selection-list.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/menu/typings/menu-directive.d.ts(9,27): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/menu/typings/menu-directive.d.ts(16,29): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/menu/typings/menu-item.d.ts(8,60): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/menu/typings/menu-panel.d.ts(10,27): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/menu/typings/menu-panel.d.ts(11,29): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/menu/typings/menu-trigger.d.ts(1,43): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/menu/typings/menu-trigger.d.ts(2,67): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/menu/typings/menu-trigger.d.ts(7,43): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/progress-spinner/typings/progress-spinner.d.ts(10,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/radio/typings/radio.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/radio/typings/radio.d.ts(9,43): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/select/typings/select.d.ts(8,44): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/select/typings/select.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/select/typings/select.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/collections'.
node_modules/@angular/material/select/typings/select.d.ts(11,103): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/sidenav/typings/drawer.d.ts(9,61): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/sidenav/typings/drawer.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/bidi'.node_modules/@angular/material/sidenav/typings/drawer.d.ts(11,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/sidenav/typings/drawer.d.ts(15,31): error TS2307: Cannot find module '@angular/cdk/scrolling'.
node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/slider/typings/slider.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/slider/typings/slider.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/snack-bar/typings/snack-bar-config.d.ts(9,36): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/snack-bar/typings/snack-bar-config.d.ts(10,27): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/snack-bar/typings/snack-bar-container.d.ts(10,68): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/snack-bar/typings/snack-bar-ref.d.ts(8,28): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(8,31): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(9,36): error TS2307: Cannot find module '@angular/cdk/layout'.
node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(10,25): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/snack-bar/typings/snack-bar.d.ts(11,31): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/sort/typings/sort-header.d.ts(9,30): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/stepper/typings/step-header.d.ts(8,30): error TS2307: Cannot find module '@angular/cdk/a11y'.
node_modules/@angular/material/stepper/typings/step-label.d.ts(9,30): error TS2307: Cannot find module '@angular/cdk/stepper'.
node_modules/@angular/material/stepper/typings/stepper-button.d.ts(1,52): error TS2307: Cannot find module '@angular/cdk/stepper'.
node_modules/@angular/material/stepper/typings/stepper.d.ts(8,37): error TS2307: Cannot find module '@angular/cdk/stepper'.
node_modules/@angular/material/stepper/typings/stepper.d.ts(9,32): error TS2307: Cannot find module '@angular/cdk/bidi'.node_modules/@angular/material/table/typings/cell.d.ts(9,84): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/table/typings/row.d.ts(1,66): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/table/typings/table-data-source.d.ts(8,28): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/table/typings/table.d.ts(1,26): error TS2307: Cannot find module '@angular/cdk/table'.
node_modules/@angular/material/tabs/typings/tab-body.d.ts(10,49): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/tabs/typings/tab-body.d.ts(11,43): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/tabs/typings/tab-header.d.ts(8,43): error TS2307: Cannot find module '@angular/cdk/bidi'.node_modules/@angular/material/tabs/typings/tab-header.d.ts(13,31): error TS2307: Cannot find module '@angular/cdk/scrolling'.
node_modules/@angular/material/tabs/typings/tab-label.d.ts(9,27): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(9,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/tabs/typings/tab-nav-bar/tab-nav-bar.d.ts(10,31): error TS2307: Cannot find module '@angular/cdk/scrolling'.
node_modules/@angular/material/tabs/typings/tab.d.ts(8,32): error TS2307: Cannot find module '@angular/cdk/portal'.
node_modules/@angular/material/toolbar/typings/toolbar.d.ts(10,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(9,45): error TS2307: Cannot find module '@angular/cdk/a11y'.node_modules/@angular/material/tooltip/typings/tooltip.d.ts(10,32): error TS2307: Cannot find module '@angular/cdk/bidi'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(11,156): error TS2307: Cannot find module '@angular/cdk/overlay'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(12,26): error TS2307: Cannot find module '@angular/cdk/platform'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(13,34): error TS2307: Cannot find module '@angular/cdk/scrolling'.
node_modules/@angular/material/tooltip/typings/tooltip.d.ts(16,53): error TS2307: Cannot find module '@angular/cdk/layout'.
src/app/components/job-execution-report/job-execution-report.component.ts(19,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/job-execution-report/tasks-details-dialog.component.ts(3,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/job-summay-dialog/list-jobs.dialog.component.ts(9,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/list-jobs/list-jobs.component.ts(10,26): error TS2307: Cannot find module '@angular/cdk/collections'.src/app/components/list-tasks/list-tasks.component.ts(20,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/list-tasks/list-tasks.component.ts(21,21): error TS2307: Cannot find module '@angular/cdk/keycodes'.
src/app/components/list-tasks/list-tasks.dialog.component.ts(7,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/list-workflows/list-workflows-dialog.component.ts(4,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/list-workflows/list-workflows.component.ts(11,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/my-approvals/my-approvals.component.ts(11,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/my-team-requests/my-team-requests.component.ts(9,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/pending-scheduled-jobs/pending-scheduled-jobs.component.ts(10,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/profile/profile.component.ts(9,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/rfc-executions-report/rfc-execution-report.component.ts(4,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/run-summary-dialog/run-summary-dialog.component.ts(3,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/schedule-job/runtime-pause-config-dialog.component.ts(5,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/schedule-job/schedule-job.component.ts(1186,81): error TS2339: Property 'taskArgsValuesObj' does not exist on type '{}'.
src/app/components/team-requests/team-requests.component.ts(11,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/components/team-security/team-security.component.ts(15,26): error TS2307: Cannot find module '@angular/cdk/collections'.
src/app/modules/atom-ng-material.module.ts(33,30): error TS2307: Cannot find module '@angular/cdk/table'.


webpack: Failed to compile.

Source: Angular

by 13design

Dec 17,2018

Mat-table with rowGroup

In my Mat-table I need to display a result like the picture below, with a row that specify a specific property of the items.

I am following this example:
stackblitz but in my case I am comparing the current item property with the precedent one and if these properties are not the same I need to show the rowGroup
I don’t know if it is the correct way with material but in the method that do this comparsion I am not be able to get the precedent item.

Method

isGroup(index, item: AccessLog): boolean {
 if (index == null) return false;
 if (this.accesslogs && this.accesslogs.length > 0) {
  if (index == 0) return true;
  else {
    if (item.remoteAddress == this.accesslogs[index - 1].remoteAddress) {
      return false;
    } else {
      return true;
    }
  }
}
return false;

}

Html

  <table mat-table [dataSource]="accesslogs" class="example-table" matSort (matSortChange)="temp($event)">
    <!-- Number Column -->
    <ng-container matColumnDef="createdDate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "accesslogs.table.headers.createddate" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.createdDate | date: ("pattern.datehourmin" | translate) }}</td>
    </ng-container>


    <ng-container matColumnDef="remoteAddress">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "accesslogs.table.headers.remoteaddress" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.remoteAddress }}</td>
    </ng-container>

    <!-- Created Column -->
    <ng-container matColumnDef="created">
      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>{{ "accesslogs.table.headers.useragent" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.userAgent | ellipse: 50 }}</td>
    </ng-container>

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

    <!-- Group header -->
    <ng-container matColumnDef="groupHeader">
      <td colspan="999" mat-cell *matCellDef="let row">
        <strong>ip {{ row.remoteAddress }}</strong>
      </td>
    </ng-container>

    <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"></tr>
  </table>

Source: Angular

by 13design

angular, angular-material, autocomplete, material-design Dec 14,2018

Mat-autocomplete either doesn’t bind or validate

I’m working on an Angular6 application with Material Design and ReactiveForms and I’m having some trouble getting validation/binding to work on a Material auto-complete control.

As far as i know, i need the [formControl] to bind my values and the formControlName='countryid' in combination with required attribute for reactiveforms validation.

The problem is, I can either get the lookup to work OR the validation but not both for some reason. I’m pretty sure this has to do with the mentioned attributes and the underlying binding, but I just don’t see the problem. I tried different combinations and workarounds but to no avail.

Does anyone see where I messed up? Thanks in advance.

Stackblitz here: https://stackblitz.com/edit/angular-xhekyg

Source: Angular

by 13design

angular, angular-material Dec 12,2018

Using HTTP GET request to fetch data in an Angular Material Table

I have an Angular Material table in which I want to fetch data from a service. This is my service.

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Message } from '../messages/message-table/message.model';

@Injectable()

export class MessageService {
  constructor(private http: HttpClient) {}

  getMessageTableData() {
    return this.http.get<Message[]>('<removed>');
  }
}

This is the interface Message for the data

export interface Message {
    RequestID: string;
    RequestStatus: string;
    RequestorName: string;
    SubmissionDate: string;
    ApproverName: string;
    ApprovalDate: string;
    Subject: string;
    MessageStatus: string;
    ReadStatus: string;
  }

In my component.ts file, I’m able to display the data in console using this,

ngOnInit() {

    this.messageService.getMessageTableData().subscribe(
      (response) => console.log(response)
    )
}

I’ve seen the example code on Angular material’s website but since I have a lot of client side filtering on my table, I want to use MatTableDataSource for my dataSource. That example uses a custom dataSource and I’m not able to include my filters in that. How can I display this data, which is coming in JSON form from my service, in my table?

Attaching the HTML code for my table as well

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="RequestID">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Request ID </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestID}} </td>
    </ng-container>

    <ng-container matColumnDef="RequestStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Request Status </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestStatus}} </td>
    </ng-container>

    <ng-container matColumnDef="RequestorName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Requestor Name </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestorName}} </td>
    </ng-container>

    <ng-container matColumnDef="SubmissionDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Submission Date </th>
        <td mat-cell *matCellDef="let element"> {{element.SubmissionDate}} </td>
    </ng-container>

    <ng-container matColumnDef="ApproverName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Approver Name </th>
        <td mat-cell *matCellDef="let element"> {{element.ApproverName}} </td>
    </ng-container>

    <ng-container matColumnDef="ApprovalDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Approval Date </th>
        <td mat-cell *matCellDef="let element"> {{element.ApprovalDate}} </td>
    </ng-container>

    <ng-container matColumnDef="Subject">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Subject </th>
        <td mat-cell *matCellDef="let element"> {{element.Subject}} </td>
    </ng-container>

    <ng-container matColumnDef="MessageStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Message Status </th>
        <td mat-cell *matCellDef="let element"> {{element.MessageStatus}} </td>
    </ng-container>

    <ng-container matColumnDef="ReadStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Read Status </th>
        <td mat-cell *matCellDef="let element"> {{element.ReadStatus}} </td>
    </ng-container>
</table>

Source: Angular

by 13design

angular, angular-material, mat-tab, tabs Dec 12,2018

How can I focus on an specific mat-tab

<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0">
    <mat-tab label="DATOS EXPEDIENTE">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-expediente></app-informe-expediente>
      </div>
    </mat-tab>
    <mat-tab label="DATOS ALTERACIÓN">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-alteracion></app-informe-alteracion>
      </div>
    </mat-tab>
    <mat-tab label="DATOS INMUEBLES">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-inmuebles></app-informe-inmuebles>
      </div>
    </mat-tab>
    <mat-tab label="FLUJO DE TRAMITACIÓN">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-tramitacion></app-informe-tramitacion>
      </div>
    </mat-tab>
    <mat-tab label="DOCUMENTOS ASOCIADOS">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-documentos></app-informe-documentos>
      </div>
    </mat-tab>
</mat-tab-group>

This is my mat-tab-group that depends on a browser, so it triggers every time I click my submit button. I need to know how can I get the first tab with index 0 to get focused every time I click my submit button.
I know it has to do with index and that stuff but I don’t know, I am controlling the indexes with MatTabChangeEvent.

Source: Angular

by 13design

angular, angular-material, html, typescript Dec 10,2018

Dynamic form using *ngFor and submitting values from it

I have a stackblitz as a guide.

I am wanting to display a list of material cards that I click an ‘edit’ button, to which I can edit text fields, and when I click on the ‘save’ icon, it of course saves by triggering an function etc.

I am struggling however to get to grips with how this all works within Angular and the Material nature of my app.

html

<form id="myForm" [formGroup]="thisIsMyForm">
  <mat-card [formGroup]="x" *ngFor="let x of data; let i = index">
    <mat-form-field>
      <label for="{{x.name}}">Name</label>
      <input formControlName="name" id="{{x.name}}" matInput value="{{x.name}}">
    </mat-form-field>
    <mat-form-field>
      <label for="{{x.type}}">Type</label>
      <input formControlName="type" id="{{x.type}}" matInput value="{{x.type}}"/>
    </mat-form-field>
  </mat-card>
</form>

import { Component, ViewChild } from '@angular/core';
import {MatSnackBar} from '@angular/material';
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  thisIsMyForm: FormGroup

  data = [
    {name:"one", type:"one"},
    {name:"two", type:"two"},
    {name:"three", type:"three"},
  ];

  constructor(private formBuilder: FormBuilder) {}

  onSubmit() {
    // Here I would like to be able to access the values of the 'forms'
  }

}

Source: Angular

by 13design

Category Archive angular-material