logo
down
shadow

Angular: Pass data from Material Dialog to component, which didn't open the dialog


Angular: Pass data from Material Dialog to component, which didn't open the dialog

By : user2185481
Date : November 22 2020, 04:01 AM
hop of those help? I don't know this is the right way to solve problem but i try to help if it's work for you
network.component.html
code :
<button mat-raised-button (click)="openDialog()">Click</button>
 constructor(private fb: FormBuilder, private _AS: AuthService, public dialog: MatDialog) {}
    openDialog(): void {
        const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
          width: '250px',
          data: ''
        });

        dialogRef.afterClosed().subscribe(result => {
          this._AS.emitTransaction(result);
          console.log('The dialog was closed');
        });
      }
@Component({
  selector: 'app-dialog',
  templateUrl: 'dialog.html',
})
export class DialogOverviewExampleDialog {
  form: FormGroup;
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) {
   this.form = this.fb.group({
      sender: ['', Validators.required],
      recipient: ['', Validators.required],
      amount: ['', Validators.required],
      fee: ['', Validators.required],
      releasedAt: [moment(), Validators.required]
    });
  }
  onNoClick(): void {
    this.dialogRef.close();
  }
}
<div [formGroup]="form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="first" formControlName="sender">
  </mat-form-field>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="second" formControlName="recipient">
  </mat-form-field>
<mat-form-field class="example-full-width">
    <input matInput placeholder="second" formControlName="amount">
  </mat-form-field>
<mat-form-field class="example-full-width">
    <input matInput placeholder="second" formControlName="fee">
  </mat-form-field>
<mat-form-field class="example-full-width">
    <input matInput placeholder="second" formControlName="releasedAt">
  </mat-form-field>
 <button [mat-dialog-close]="form.value">save</button>
</div>
 export class AuthService {

     public transaction = new BehaviorSubject<any>(false);
  transaction$ = this.transaction.asObservable();

  emitTransaction(data: any) {
    this.transaction.next(data);
  }
ngOnInit() {
    this._AS.transaction$.subscribe(data => {
      this.data = data;
      console.log(this.data);
    });
  }


Share : facebook icon twitter icon
Angular Material viewchild dialog without dialog component class

Angular Material viewchild dialog without dialog component class


By : Hugo Amaro
Date : March 29 2020, 07:55 AM
may help you . Is there way that I can open an angular material 2 dialog with view child reference without creating a dialog component? , Try this
View.html
code :
 <button (click)="openModal(mytemplate)">Open my template</button>

    <ng-template #mytemplate>
        <h1>It works</h1>
    </ng-template>
 openModal(templateRef) {
            let dialogRef = this.dialog.open(templateRef, {
                width: '250px',
                // data: { name: this.name, animal: this.animal }
            });

            dialogRef.afterClosed().subscribe(result => {
                console.log('The dialog was closed');
                // this.animal = result;
            });
        }
How to pass a component as a parameter into an Angular Material dialog?

How to pass a component as a parameter into an Angular Material dialog?


By : Ajith
Date : March 29 2020, 07:55 AM
Does that help In your app.module.ts file, try added the name of the popup component to the entryComponents array. It's found inside the @NgModule function. Make sure you import the popup component also. That should resolve that error.
How to open a PrimeNG p-dialog box on a button click and pass data from the component to p-dialog?

How to open a PrimeNG p-dialog box on a button click and pass data from the component to p-dialog?


By : customForm
Date : March 29 2020, 07:55 AM
wish help you to fix your issue It's easier with Angular2+ and PrimeNG. You just need to define a display property to show or hide the p-dialog and you don't need to create another component.
Now, your code should look something like :
code :
<ul>
    <li *ngFor="let report of participant.reports">
        <a (click)="choosePDFLang(participant, report.type, report.name)">
            {{ report.name }}
        </a>
    </li>
</ul>

<p-dialog header="{{modalTitle}}" [(visible)]="display">
    {{modalContent}}
</p-dialog>
choosePDFLang(participant, reportType, reportName) {
    this.display = true;
    this.modalTitle = reportName;
    this.modalContent = 'Content of ' + reportName;
  }
how to pass data from angular material dialog to parent component?

how to pass data from angular material dialog to parent component?


By : Mallory Mazer
Date : March 29 2020, 07:55 AM
will be helpful for those in need DEMO COMMON POP-FORM
common-pop-service:
code :
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { PupupFormComponent } from './pupup-form/pupup-form.component'

@Injectable()
export class CommonModelService {
  animal: string;
  name: string;
  date1: any;
  date2: any
  constructor(public dialog: MatDialog) { }
  openDialog(): Observable<any> {
    const dialogRef = this.dialog.open(PupupFormComponent, {
      width: '250px',
      data: { name: this.name, animal: this.animal, date1: this.date1, date2: this.date2 }
    });

    return dialogRef.afterClosed();
  }
}
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

import { CommonModelService } from './common-model.service'

export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(private commModel: CommonModelService) { }

  openDialog() {
    this.commModel.openDialog().subscribe(data => {
      console.log(data);
    });
  }
}
<button mat-raised-button (click)="openDialog()">Open Form</button>
<div mat-dialog-content>
    <p>What's your favorite animal?</p>
    <mat-form-field>
        <input matInput [(ngModel)]="data.animal">
    </mat-form-field>

    <mat-form-field>
        <input matInput type="time" atp-time-picker [(ngModel)]="data.date1">
    </mat-form-field>

    <mat-form-field>
        <input matInput type="time" atp-time-picker [(ngModel)]="data.date2">
    </mat-form-field>
</div>

<div mat-dialog-actions>
    <button mat-button (click)="onNoClick()">No Thanks</button>
    <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
</div>
How do I pass html to a template dialog component using Material with Angular 2/4

How do I pass html to a template dialog component using Material with Angular 2/4


By : Aijaz Ahmad
Date : March 29 2020, 07:55 AM
this one helps. Updates Update #1
The below code blocks are now updated to the latest version of @angular/material.
Related Posts Related Posts :
  • How to customize PrimeNG TurboTable paginator?
  • ExpressionChangedAfterItHasBeenCheckedError when using ReactiveForms and NgbModal
  • Angular Material table with right-to-left direction
  • Angular 7 how to calculate the time a component take to completely load on the DOM
  • Observerable appending data over and over again on populate action
  • this is not a function - Angular 5
  • angular app runs in local tomcat but gives error in dev environment
  • Keep the the alert box without dismiss if there is an error
  • Textarea typing issue in ngFor in Angular 6
  • fxFlex angular flex layout not working as expected version 7.0.0-beta.19
  • Combine requests in series - Angular 7
  • Display table for dyanamically created row in angular 5
  • ngFor does not render my obersavle response, but it does inset old values I add to the array?
  • Concat variable name in angular cli using ngFor
  • Angular 5 'inputClick' is declared but its value is never read
  • Angular 7 - getting error as `Module parse failed: Unexpected character '@'` how to fix this?
  • RxJs subscribeTo.js observable check works in Chrome, but fails in Chrome Incognito, MS Edge, and Firefox
  • Getting the error: Could not find column with id "id"
  • Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks
  • Angular - use a service in a function and this function in a pipe
  • How to dynamically call the parent methods from child component?
  • Trigger same function in different component
  • Angular 7 error RangeError: Maximum call stack size exceeded
  • Maximum call stack size exceeded when adding PWA in Angular
  • angular reactive forms remove formArray elements after save
  • check whether angular array object has a specified value or not
  • While using moment in Angular 7 getting Error:TypeError: moment is not a function
  • Cannot set property 'filterPredicate' of undefined error in Angular Material Table
  • Angular 2+ Animation: Adding checkbox check effect to individual checkboxes that are generated by a loop
  • I am having issue in checking whether a username exists or not in my angular 6 application via api
  • How can I convert an ionic http GET request from @angular\Http to @ion-native\Http?
  • fa-icon is not a known element in a Reusable Module
  • Angular 6: Is it possible to pass a function as parameter?
  • Angular Reactive Forms with FormArray inside a nested FormGroup
  • Angular: Right way to wait for Async data to be loaded
  • NgRX effect called with empty state
  • How do you create a union type for a component's services?
  • Angular6 - Using service outside of constructor - error as undefined
  • How to import a service from another module in Angular 6
  • Fetch Wordpress API data into Angular 7
  • AngularMaterial - MatRipple is displaying ripple outside table row
  • How to change child component style with Emulated encapsulation in Angular 6?
  • Angular 7 service not acting as a singleton
  • Wrong date from java GET
  • Angular PrimeNg- Callback on SideNav close
  • Angular use $event.target or ViewChild...is there a difference?
  • Weird update behavior: Template constantly calls display function
  • Confused about typescript scopes
  • When dealing with NgRx, why use Typescript Getter to display properties on templates?
  • Angular Share service subject binding problem
  • Angular Reactive Forms handle two level / dimensional checkboxes
  • Inline Partial<T> still complains of missing field?
  • getting empty data from an array in angular
  • How can I send data to other component in Angular?
  • Angular Font Awesome in a component library - FontAwesome: Could not find icon with iconName=times and prefix=fas
  • Ionic Angular – just parts of the component are visible
  • Ionic 3 not rendering variables on view change
  • Angular refresh ngFor with async observable after POST
  • Strange Routing Issue Angular 7 + Ionic 4 Beta
  • Kendo Grid for Angular - Trouble getting row selection, paging and sorting to work together
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org