CODEWITHSUNDEEP
angular
Paul Mikki
Paul Mikki

Reputation: 83

How can I clear form data from another component using material dialog in the same ts file?

How can I clear form data from another component using material dialog in the same ts file?

Here is my .ts file

@Component({
  selector: 'clear-confirmation-dialog',
  templateUrl: './clear-confirmation-dialog.html'
})
export class ClearConfimationDialog {

  clearForm(){
    /** FUNCTION TO CLEAR FORM DATA **/
  }

}

@Component({
  selector: 'app-enter-user',
  templateUrl: './enter-user.component.html',
  styleUrls: ['./enter-user.component.scss']
})
export class EnterUserComponent implements OnInit {

/** THIS IS THE FORM DATA **/
user = {
  name: '',
  address: ''
}

}

Upvotes: 0

Views: 134

Answers (1)

junk
junk

Reputation: 997

Inject the EnterUserComponent to the ClearConfimationDialog

@Component({
  selector: 'clear-confirmation-dialog',
  templateUrl: './clear-confirmation-dialog.html'
})
export class ClearConfimationDialog {

  enter_user_component:EnterUserComponent;

  clearForm(){
    /** FUNCTION TO CLEAR FORM DATA **/
   this.enter_user_component.clearForm()
  }

 constructor(@Inject(forwardRef(() => EnterUserComponent)) enter_user_component:EnterUserComponent){
        this.enter_user_component = enter_user_component
  }

}

By the way, only when the app-enter-user include the clear-confirmation-dialog will work

for example:

 enter-user.component.html:

....
<clear-confirmation-dialog></clear-confirmation-dialog>
....

You better add @Optional() & @Host() decorator to enter_user_component

More about forwardRef:

https://angular.io/api/core/forwardRef

Upvotes: 1

Related Questions