如何从angular2中的.ts文件访问HTML文件的方法？

Question

I am beginners for Angular2, I created a modal dialog, here is my HTML file. index.html file:-

  <button type="button" class="btn btn-default" (click)="modal.open()">Open</button> <modal #modal> <modal-header [show-close]="true"> <h4 class="modal-title">I'm a modal!</h4> </modal-header> <modal-body> 

        Here i want to call show() method from .ts file.
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
    </modal>

After clicking on Open button I want to call show(){....} that is inside .ts file and I want to display inside <modal-boady></modal-body> tag.

Here is my hello.component.ts file:-

 import {Component, View} from "angular2/core"; @Component({ selector: 'my-app', templateUrl: './index.html' }) export class HeapMemoryGraphComponent implements OnInit { constructor(){} ngOnInit() { this.show(); } show(){ console.log("=====show()======="); } } 

How could I do that? please guide me.

Thanks.

Answer 1

There are several ways to get element handle in component. But most understandable guide is here.

http://valor-software.com/ngx-bootstrap/#/modals

Please check Child Modal there.

<button type="button" class="btn btn-primary" (click)="showChildModal()">Open child modal</button>
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Child modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        I am a child modal, opened from parent component!
      </div>
    </div>
  </div>
</div>

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-child',
  templateUrl: './child.html'
})
export class DemoModalChildComponent {
  @ViewChild('childModal') public childModal:ModalDirective;

  public showChildModal():void {
    this.childModal.show();
  }

  public hideChildModal():void {
    this.childModal.hide();
  }
}

As you can see here, component is referenced the handle of modal element in .ts file.

Answer 2

html file:

<input class="search-text" type="text" (keyup)="onKeyUp($event)">
<button type="button" [disabled]="!isValidForSearch()"  class="btn btn-primary" (click)="getUsers()">Search</button>

ts file:

//Here I am getting the value entered in the text box
onKeyUp(event){
   this.searchText = event.target.value;
}

//Here I am enabling the button if user enters any text in the search text box other wise it will be disabled 
isValidForSearch() {
   var isValid = false;
   if(this.searchText != '' && this.searchText != undefined) {
       isValid = true;
   }
   return isValid;  
}

I hope this helped you.