Bind external HTML component file to json data from calling page in Angular

Question

with Angular 14, I'm using an ag grid to display rows of data in my main component page. I select a row, click a button and I want to call an auxiliary component HTML file in a separate directory that contains its own typescript file. I am able to collect the row data as JSON data but I want to insert the auxiliary component HTML into my main page.

Q: How can I bind the auxiliary html component to appear in my main html?

Directory Structure

ClientApp
   src
     app
        MyObject
            MyObject-grid-main
                 MyObject-grid-main.css
                 MyObject-grid-main.html
                 MyObject-grid-main.ts
            MyObject-grid-auxiliary
                 MyObject-grid-auxiliary.css
                 MyObject-grid-auxiliary.html
                 MyObject-grid-auxiliary.ts

MyObject-grid-main.html

<button (click)="getSelectedRowData()">Get More Info</button>
<ag-grid-angular #agGrid id="ag-grid"></ag-grid/angular>
...
<div>
<!-- Here I want to insert MyObject-grid-auxiliary.html after I bind the JSON data -->
</div>

MyObject-grid-main.ts

@ViewChild('agGrid' grid!: GridApi;
getSelectedRowData()
{
    const selectedData = this.grid.getSelectedRows();
    const jsonDataString = JSON.stringify(selectedData);
    alert(`Selected Data:\n${jsonDataString}`); // display in popup

   // Here is where I want to bind the JSON data to the MyObject-grid-auxiliary.html
   // and have it appear in the place holder above

}

MyObject-grid-auxiliary.html

<h2 class="title">{{data.title}}</h2>
...
<span>{{data.remarks}}</span>
...
<tr *ngFor="let pos of data.locations">
                <td>
                  <span>{{pos.position.lat}}</span>
                </td>
                <td>
                  <span>{{pos.position.long}}</span>
                </td>
                <td>
                  <span>{{pos.lastReportedOnDateTime}}</span>
                </td>
              </tr>

gaspx · Accepted Answer · 2022-11-01 19:02:51Z

1

you can simply pass a MyObject-grid-main.ts class property set at first to null as MyObject-grid-auxiliary input and then check in the auxiliary component with an ngIf when the data are set, then show your stuff.

in getSelectedRowData set the class property and content should will be display in the auxiliar component

Update with example:

in your MyObject-grid-main.ts add a new property called

auxiliarData = null;

in MyObject-grid-main.html add the auxiliary component where you need.

<myobject-grid-auxiliary [data]="auxiliarData"></myobject-grid-auxiliary>

in the function getSelectedRowData add the update logic, example

const selectedData = this.grid.getSelectedRows();
const jsonDataString = JSON.stringify(selectedData);
alert(`Selected Data:\n${jsonDataString}`);
...
this.auxiliarData = selectedData;

in MyObjectGridAuxiliary.ts

export class MyObjectGridAuxiliary {
    @Input() data = '';
}

in MyObject-grid-auxiliary.html

<div *ngIf="data"> put your html here ... </div>

so, whenever the MyObjectGridAuxiliary.data is defined the component will show you html with your data.

edited Nov 1, 2022 at 19:02

answered Nov 1, 2022 at 15:15

gaspx

464 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fifamaniac04 Over a year ago

I need to remain on the main page. will your suggestion allow for that? could you provide a code snippet for it? I'm not super well versed in angular yet :\

gaspx Over a year ago

i added an example

Collectives™ on Stack Overflow

Bind external HTML component file to json data from calling page in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related