How to access input value in multiple component?

Question

I have 2 components : headerComponent and searchPageComponent.
Whatever the value we enter on header component search bar, the search page component should get the value.

header.component.html

<form class="form-inline md-form form-sm">
          <input class="form-control form-control-sm mr-3 w-75" id="searchString" type="text" 
             placeholder="Search" [(ngModel)]="searchValue" name="searchString" (ngModelChange)="onChange($event)">
          <button class="headerSearchbarBtn" id="btnSearch" routerLink="/searchResult">
              <span class="headerSearchbarIcon"></span>
           </button>
       </form>

header.component.ts

export class HeaderComponent implements OnInit {
        searchValue: string;
        constructor(private router: Router) { }
        ngOnInit() {
         }
         onChange($event) {
          this.searchValue = $event;
         }
       }

Search.component.ts

export class SearchComponent implements  OnInit {
        ngOnInit() {
          console.log(this.searchValue); // 'this.searchValue' => value should come from header.compomnent.ts 
        }
      }

There is no parent child relation here, I want to know how the data is passed from one component to other, and Why cant we directly access the input field box value in different components in Angular?

check this:https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication — Chellappan வ, Feb 20 '20 at 06:52

score 1 · Answer 1 · answered Feb 20 '20 at 07:03

1

Service in add this code

 setSearchValue = new Subject<any>();
  getSearchValue = this.setSearchValue.asObservable();

First import your Service in Header component

constructor(private service: HeaderService)

header.component.ts

export class HeaderComponent implements OnInit {
        searchValue: string;
        constructor(private router: Router) { }
        ngOnInit() {
         }
         onChange($event) {
           this.service.setSearchValue.next(event);
           });
         }
       }

Search.component.ts

export class SearchComponent implements  OnInit {
        ngOnInit() {
         this.getSearchValue();
        }
      }

   getSearchValue(){
      this.service.getSearchValue.subscribe((value) => {
       this.searchValue = value;
      });
    }

answered Feb 20 '20 at 07:03

Vijay Prajapati

738
1
7
20

This works, But subscibe is not returning the value for the first time(it is not updating value - this.searchValue = value;), if I again enter some value on the input field, then only it is returning value. – Pavan Feb 21 '20 at 06:49
@PavanRT Please add code in stackblitz and share link. – Vijay Prajapati Feb 21 '20 at 10:08
https://stackblitz.com/edit/angular-behaviorsubject-example?file=src%2Fapp%2Fservices%2Fuser.service.ts – Vijay Prajapati Feb 21 '20 at 10:10
I have updated the code here - https://stackblitz.com/edit/angular-getinputvalue - @Vijay Prajapati – Pavan Feb 22 '20 at 12:22

score 0 · Answer 2 · answered Feb 20 '20 at 07:08

0

You need to use BehaviorSubject for without parent and child relation components. This link will help to you: https://stackblitz.com/edit/angular-behaviorsubject-example?file=src%2Fapp%2Fone%2Fone.component.html

answered Feb 20 '20 at 07:08

Vignesh

91
6

score 0 · Answer 3 · answered Feb 20 '20 at 09:31

You can use a service and a subject to communicate between sibling components

export class SharedService {

    private searchInputSource = new Subject<string>();

    searchInput = this.searchInputSource.asObservable();

    setSearchInput(value: string) {
        this.searchInput.next(value);
    }
}

export class HeaderComponent implements OnInit {
    searchInput: string;
    constructor(private sharedService: SharedService) { }
    ngOnInit() {
    }
    onChange($event) {
        this.sharedService.setSearchInput.next($event);
    });
}

export class SearchComponent implements OnInit, OnDestroy {

    privates subscription: Subscription;
    searchInput: string;

    ngOnInit(private sharedService: SharedService) {
        this.subscription = sharedService.searchInput.subscribe(
            value => {
                this.searchInput = value;
            });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

How to access input value in multiple component?

3 Answers3