graphics-page.component.ts

import { Component} from '@angular/core';
import { Router } from '@angular/router';
import {FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';


/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

@Component({
  selector: 'app-graphic',
  templateUrl: './graphics-page.component.html',
  styleUrls: ['./graphics-page.component.css'],
})



/**
 * Page that displays graphics (Templates and custom)
 */
export class GraphicsPageComponent  {

  validate = false;     //True when generate button is clicked on and informations entered are accurates
  errorOcc = false;   //Doesn't display graphic if error, display an error message

  //Selected graphic
  public matSelectedValue: string = "";

  //Selected graphic type
  public matSelectedGraphic: string = '';

  //Graphic options
  graphics : string[] = [
    "Tonalité des retombées par communiqué", "Departements des retombées par communiqué", "Type de retombées", "Type de retombées avec tonalité", "Journaux des retombées", "Départements de retombées", "Tonalité", "Retombées par thème"
  ];

  //Graphic types
  graphicTypes: string[] = [
    "Diagramme en bâtons", "Courbe", "Diagramme circulaire"
  ]

  //Will get article names from server
  articleNames: string[] = [
    "Article 1", "Article 2", "Article 3", "Article 4", "Article 5"
  ];

  public matSelectedName: string = '';

  formControlName = new FormControl('', Validators.required);



  constructor(private router: Router) { }





  /**
   * Called when selection changes. Routes an other component to display it according to matSelectedValue
   */
  public manageSelection() {

      //////////////////// Display Input cp compononent \\\\\\\\\\\\\\\\\\\\