Passing information between components in Angular 10 (console.log works, but interpolation doesn't)

Question

I'm having trouble transferring information for interpolation to an uncle/aunt component. My components are organized like this:

src -> app -> layout
           -> modules -> search

My search component can print the information out fine with interpolation, but when it sends the information over to layout, the information arrives fine but cannot be printed with interpolation.

export class SearchComponent implements OnInit {
     name:string = "default";
     layout:LayoutComponent = new LayoutComponent();
     
     public changeName(input:string)
     {
        this.name = input; //prints out fine with interpolation
        this.layout.printJSON(input); //calls the function in question
     }
 }

This code, with the help of {{ name }}, prints out the value that it is given without difficulty. However, when it calls printJSON(), the function prints with console.log, but interpolation fails {{searchResults}}.

export class LayoutComponent implements OnInit{
    searchResults: string = "hello";

    public printJSON(name:string){
        if(name){
           console.log(name); //prints out the correct string
           this.searchResults = name; //doesn't print out with interpolation
        }
     }
 }

Edit: here is the HTML where I am calling changeName().

<div class="content" role="main">
<div *ngIf="!layout.mySearch">
    <span><h2 color="black">Find an organization</h2></span>   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <form class="example"  [formGroup]="profileForm" (submit)='changeName(myInput.value); mySearch=true; myImage = false'><!--square brackets one way binding-->
        <input type="text" placeholder="Search.." name="search" formControlName='firstName' #myInput>
        <button type='submit'><i class="fa fa-search"></i></button>
        </form> 
    <span><h4 color="black"><div>Advanced Search</div></h4></span>
</div>

So here, the string passed in to this search button is saved by #myInput and is passed to changeName() with a submit of the search button. The last line is {{name}}, which prints whatever I put into the search bar successfully.

can you share your HTML template? check this default value prints with interpolation `searchResults: string = "hello";`? in HTML => `{{ searchResults}}` — Saad Abbasi, Sep 18 '20 at 17:07
I don't think there is an error with interpolation. if you get value in function and `console.log()` it should work. you can check [Here](https://jsfiddle.net/yurzui/1hk7knwq/) — Saad Abbasi, Sep 18 '20 at 17:14
I updated it to include the HTML that calls changeName(). It prints out hello fine as an initial value, and when I put the same code in printJSON into ngOnInit(), it works fine. My boss agrees that the interpolation should work, which is why I wonder if it's because I'm not calling the uncle/aunt component correctly. — Anonymouse, Sep 18 '20 at 20:55
I don't think it's anything in the layout.component.html file because when I comment out all the code besides {{ searchResults }} and put the printJSON() code in the ngOnInit(), it seems to work fine — Anonymouse, Sep 18 '20 at 20:59

score 0 · Answer 1 · answered Sep 19 '20 at 05:45

You can achieve that with helper function in ngOninit as you said in the comment

code in the ngOnInit(), it seems to work fine

with these changes, you can achieve interpolation. also here is a working example Interpolation Example

export class AppComponent implements OnInit {
  searchResults: string = "hello";
  name:string  = "Ananymous";
  data_name:string;//helper property to hold data for better understanding
  
  ngOnInit() {
   this.name="Saad"//hard corded naem for example
        if(name){
           console.log(name); //prints out the correct string
           this.data_name = this.name; //you said your code works till here and prints data in ngOnInit()? now lets create another helper function.
        }
       this.interPolateData(this.data_name)//helper function 
     }
     
   interPolateData(name:string){
     this.searchResults = name //interpolation works now please check
   }
  }

score 0 · Answer 2 · answered Sep 30 '20 at 18:33

Update: The problem was I was sending information from a method in search to a method in layout, and the data wouldn't print via interpolation in layout. To fix this, I just returned the data back to the original search method and printed it out there via interpolation. Thanks everyone for the help!

Passing information between components in Angular 10 (console.log works, but interpolation doesn't)

2 Answers2