Using Angular 2 to invoke a component

Question

Using Angular 2 to invoke a component

Currently, I am working on building a new Angular 2 application.

Within the home.component.ts file, there is a small form that has been designed as shown in the image linked below https://i.sstatic.net/nimDm.jpg

After the user clicks on the Submit button, the Datatable should load with the relevant results. This functionality is handled by a separate component called result.component.ts

You may refer to the appearance of the loaded Datatable by clicking on this link: https://i.sstatic.net/YcjCE.jpg

At this point, I am considering the best approach for invoking the result.component from within the home.component. It is important that the first component passes the resulting dataset to the second one seamlessly.

javascript visual-studio angular typescript

Answer 1

Answer №1

If you want to display the outcome based on its selector, which is specified in the @Component Directive, and transmit the result using an @Input:

result.component.ts

@Component({
  selector: 'search-result',
  teplateUrl: './result.component.html'
})
export class ResultComponent {
  @Input() result: Result;
}

home.component.ts

export class HomeComponent {
  searchString: string;
  result: Result;

  performSearch(searchString: string) {
    // Make API call here and store the result in this.result
  }
}

home.component.html

<label for="q"><strong>Territory:</strong></label><br>
<input type="text" name="q" ([ngModel])="searchString"><br>
<button (click)="performSearch(searchString)">Search</button>
Result:
<search-result result="result"></search-result>

result.component.html

<table>
  <tr *ngFor="let item of result">
    <td>{{ item }}
  </tr>
</table>

Answer 2

If you want to display the outcome based on its selector, which is specified in the @Component Directive, and transmit the result using an @Input:

result.component.ts

@Component({
  selector: 'search-result',
  teplateUrl: './result.component.html'
})
export class ResultComponent {
  @Input() result: Result;
}

home.component.ts

export class HomeComponent {
  searchString: string;
  result: Result;

  performSearch(searchString: string) {
    // Make API call here and store the result in this.result
  }
}

home.component.html

<label for="q"><strong>Territory:</strong></label><br>
<input type="text" name="q" ([ngModel])="searchString"><br>
<button (click)="performSearch(searchString)">Search</button>
Result:
<search-result result="result"></search-result>

result.component.html

<table>
  <tr *ngFor="let item of result">
    <td>{{ item }}
  </tr>
</table>

Using Angular 2 to invoke a component

Answer №1

Similar questions

Navigation for GitHub pages

Unable to reach the prototype of the object

How can you switch the property of an object in VueJS?

Adding a NVD3 chart into a Leaflet popup

Executing a setInterval function in NodeJs without prolonging the process's lifespan

Capture all HTTP requests made by Angular2

There was an issue with d3 version 4: the function this.setAttribute() was not

How can JavaScript automatically calculate the sum of various numbers entered into multiple input fields?

Steps for deploying an application using a private node module

What could be the reason my object is not re-rendering even after the state of the object has been updated

Retrieving object properties dynamically using an array of strings

Adjust form elements dynamically depending on the selected option in a dropdown menu using Ruby on Rails

Strategies for Handling a High Volume of API Requests in Node JS

Tips for incorporating multiple services within a single Angular component

Animating Text Changes with JavaScript and jQuery

Unable to detect JavaScript in Chrome Developer Tools

What is the right way to configure an Axios Interceptor in a ReactJS app using TypeScript?

Create a Vue3 Component without attaching it to the DOM

Utilize user input to fetch data from an external API

Numbering the items in ng-repeat directive