Btukfyl

I am working on an Angular-6 Project. I have created a form inside ngxbootstrap modal which is working fine. That form has various input elements I want to access few of these elements but the issue is whenever I try to access those elements using @viewchild, the result is undefined which is basically due to the fact that those elements don't exist on DOM.So, Is there any way I can access them below is my code...

@Component({

selector: 'app-roles',

templateUrl: './roles.component.html',

styleUrls: ['./roles.component.scss'],

providers:[NgbActiveModal],

})

export class RolesComponent implements OnInit,AfterViewInit {

@ViewChild('dataTable') table:ElementRef;

@ViewChild('rolename') rolename:ElementRef; //Here it shows undefined

dataTable:any;

roleref:any;

error_array=new Array();

all_roles=new Array();

added:boolean;

closeResult: string;

modalRef: NgbModalRef;

is_shown:boolean;





profileForm=new FormGroup({

rolename:new FormControl('',[Validators.required,Validators.minLength(4)])

});

constructor(private roleservice:RolesService,private fb:FormBuilder,private 

 modalService: NgbModal,public activeModal: NgbActiveModal) 

{

}



ngOnInit() {

this.dataTable=$(this.table.nativeElement);

this.dataTable.dataTable();



}



ngAfterViewInit() {

}



open(content,form:NgForm) {

this.is_shown=true;

this.modalRef = this.modalService.open(content,{ 

size: "lg",

centered: false,

backdrop: 'static'});

this.modalRef.result.then((result) => {

  this.closeResult = `Closed with: ${result}`;

}, (reason) => {

    this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;

});

}



private getDismissReason(reason: any): string {

this.is_shown=false;

this.profileForm.reset();

if (reason === ModalDismissReasons.ESC) {

  return 'by pressing ESC';

} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {

  return 'by clicking on a backdrop';

} else {

  return  `with: ${reason}`;

}

}

}

Below Given Is HTML code

  <ng-template #content let-d="dismiss">

                <form class="form" [formGroup]="profileForm" (ngSubmit)="onSubmit()" autocomplete="off" >

                <div class="modal-header">

                  <h4 class="modal-title">Add New Role</h4>

                  <button type="button" #clsbtn class="close" aria-label="Close" (click)="d('Cross click')">

                    <span aria-hidden="true">&times;</span>

                  </button>

                </div>



        <div class="modal-body" *ngIf="is_shown==true">

            <div class="modal-body">

              <div class="col-md-5">

                                <div class="card-content">

                                    <div class="input-group">

                                        <span class="input-group-addon">

                                            <i class="material-icons">face</i>

                                        </span>

                                        <div class="form-group"><input type="text" #rolename formControlName="rolename"  class="form-control" placeholder="RoleName..." required/><span class="material-input"></span></div>

                                        <div *ngIf="profileForm.get('rolename').invalid &&  profileForm.get('rolename').touched" class="alert alert-danger">

                                            <div *ngIf="profileForm.get('rolename').errors.required">

                                                RoleName is required.

                                              </div>

                                              <div *ngIf="profileForm.get('rolename').errors.minlength">

                                                RoleName must be at least 4 characters long.

                                              </div>

                                        </div>

                                    </div>

                                 </div>

      </div>

                    </div>

                  </div>

                </div>

                <div class="modal-footer">

                  <!--<button type="button" class="btn btn-light" (click)="d('Close click')">Close</button>-->

                    <button class="btn btn-danger btn-round" style="position:relative;right:60px" [disabled]="profileForm.invalid">

                            <i class="material-icons">check</i> Add

                        </button>   

                </div>

                </form>

              </ng-template>

dataTable I think is not defined on the view.

rolename is define inside a *ngIf and maybe you'll try to access it when the condition is false.

You could try something like this:

private yourElement: ElementRef;



@ViewChild('elementName') set elementName(content: ElementRef) {

  this.yourElement = content;

}

and use yourElement when available in your component.

It's not possible because ngxbootstrap modal attaches dynamically your template content into your component when you call open method from the modalservice.

ngOnInit or ngAfterViewInit won't allow you to retrieve the reference of your embeded elements, because your elements aren't inserted to your DOM.