Angular 2 send array another page

Question

I am developing weather application with Angular.I\'m new to Angular. I want to bring the weather information of the city I selected. But I could not send the data to the se

Answer 1

There are two ways you can pass data into components, using EventEmmiters @Output() or EventReceiver @Input() or with a service. You can pass data from parent component to a child component with @Input() in the child component. Here is an example:

@Component({
  selector: 'app-parent',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ParentComponet implements OnInit {

  parentData: Weather;

  constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {

  }

}


@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ChildComponet implements OnInit {

  @Input() childData: Weather;

  constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {

  }

}

<!-- Parent html -->

<app-child [childData]="parentData"></app-child>

The above will pass data into the app-child, but this method requires you to import the child component to the parent component.

I prefer the service approach as it can be added as a service and not as a component. Below is an example of this:

export class WeatherService {

  weatherClass: Weather;
  
  //BehaviorSubject can store the last value given until the service destroyed or otherwise changed
  private data: BehaviorSubject<Weather> = new BehaviorSubject(null);

  constructor(private http: Http) {}

  otherWeather(city: string) {
    return this.http.get(`http://api.openweathermap.org/data/2.5/weather?appid=0f3fb9fa31ad3d41f1bb2bd0841c3f2f&q=${city}&units=imperial&cnt=10`).map((response: Response) => response.json());
  }
  
  setData(value: Weather) {
    this.data.next(value);
  }
  
  getData(): Observable<Weather> {
    return this.data.asObservable();
  }
}

@Component({
  selector: 'app-parent',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ParentComponet implements OnInit {

  parentData: Type = ["ADANA", "ADIYAMAN", "AFYONKARAHİSAR", "AĞRI", "AMASYA", "ANKARA", "ANTALYA", "ARTVİN"];;

  constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
   this.service.otherWeather(this.value.text).subscribe( (data: Weather) => { 
    this.service.setData(data);
    });
  }

}


@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ChildComponet implements OnInit {

  childData: Weather;

  constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.service.getData.subscribe((vales: Weather) => {
      this.childData = vales;
    });
  }

}

With this approach, you'll notice that the data is not returned straightaway and the code would not wait for data. You'll have to do any TypeScript logic related to data within the subscribe() block for it to work. HTML will update itself when the value changes. Using this method when the value of BehaviorSubject changes, anywhere that is subscribed to getData() method will also receive new data.

Drop a comment if you need any help.