I am attempting to implement two-way binding in order to dynamically change the API endpoint when a button is clicked. The value attribute of the button should be used as part of the API URL string.
I tried following an example in the Hero Angular App, but I keep encountering issues with @Input and @Output directives.
Can someone provide a clear and concise example of how I can achieve this without any complications?
I have two components: the AppComponent and another component called InfoComponent.
In the AppComponent:
HTML
<nav class="navbar" role="navigation" aria-label="main navigation">
<button value="for_api">button</button>
</nav>
<router-outlet></router-outlet>
TS
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
apiFeed = "string_for_link"
}
Then there's the Info Component that gets rendered through the Router Outlet (disregard the RouterLink)
import { Component, EventEmitter, OnInit } from '@angular/core';
import {MatTabsModule} from '@angular/material/tabs';
import {MatListModule} from '@angular/material/list';
import { Observable } from 'rxjs';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { size } from 'lodash';
@Component({
selector: 'app-info',
templateUrl: './info.component.html',
styleUrls: ['./info.component.css']
})
export class InfoComponent implements OnInit {
constructor(private http: HttpClient ) {
}
ngOnInit(){
this.http.get('redacted_for_privacy' + **api_feed**).subscribe(infos => {this.infosData = [infos as any];});
}
}
I've attempted various approaches to implementing two-way binding, but none seem to work for me. I'm relatively new to this.
My goal is for the value of the button in the AppComponent to be bound to api_feed, which would then be used in the Info Component to update the API link.
Please assist me with this issue.
There must be a straightforward solution to this problem. Please demonstrate.
Thank you