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:stackoverflow.com/questions/35884451/…

Chellappan வ
– Chellappan வ

2020-02-20 06:52:35 +00:00
Commented Feb 20, 2020 at 6:52 — Chellappan வ
– Chellappan வ, Commented Feb 20, 2020 at 6:52

Vijay Prajapati · Accepted Answer · 2020-02-20 07:03:37Z

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, 2020 at 7:03

Vijay Prajapati

7581 gold badge8 silver badges20 bronze badges

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

4 Comments

Pavan Over a year ago

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.

Vijay Prajapati Over a year ago

@PavanRT Please add code in stackblitz and share link.

Vijay Prajapati Over a year ago

stackblitz.com/edit/…

Pavan Over a year ago

I have updated the code here - stackblitz.com/edit/angular-getinputvalue - @Vijay Prajapati

Vignesh · Accepted Answer · 2020-02-20 07:08:11Z

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, 2020 at 7:08

Vignesh

916 bronze badges

Comments

Vna · Accepted Answer · 2020-02-20 09:31:30Z

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();
    }
}

Collectives™ on Stack Overflow

How to access input value in multiple component?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related