Error in template parse errors in component angular 9

Question

My doubt is the following one I have two components one of presentation and another container in angular 9, when I try to import the component of presentation in the component container gives me a syntax error I would appreciate your help to solve the problem. Thanks

current-weather.component.ts

import { Component, OnInit } from '@angular/core';
import { CurrentWeatherService } from '../services/current-weather.service';

@Component({
  selector: 'app-current-weather',
  templateUrl: './current-weather.component.html',
  styleUrls: ['./current-weather.component.scss'],
})
export class CurrentWeatherComponent implements OnInit {
  constructor(public weatherService: CurrentWeatherService) {}

  ngOnInit() {

  }
}

weather-card.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Weather } from 'src/structures/weather.structure';

@Component({
  selector: 'app-weather-card',
  templateUrl: './weather-card.component.html',
  styleUrls: ['./weather-card.component.scss']
})
export class WeatherCardComponent implements OnInit {

  @Input() weather : Weather;

  constructor() { }

  ngOnInit(): void {
  }

}

current-weather.component.html

<app-weather-card [weather]="weatherService.weather$ | async as weather" ></app-weather-card>

ERROR in Template parse errors: Parser Error: Unexpected token 'as' at column 33 in [weatherService.weather$ | async as weather] in C:/Projects/projects-angular/weatherapp/src/app/current-weather/current-weather.component.html@0:29 ("]weatherService.weather$ | async as weather" >"): C:/Projects/projects-angular/weatherapp/src/app/current-weather/current-weather.component.html@0:29

Seems like the error is coming form the template, do pos tcode for that as well. — B45i
– B45i, Commented May 24, 2020 at 18:29
because it is a service that I have with an observable to obtain in the application some data that I obtain from an api, that same syntax had it in the previous component and it worked normal did not have problems — wilds rincon
– wilds rincon, Commented May 24, 2020 at 23:14
Thank you I was able to fix it by removing the as weather and it worked. Thank you very much for your help. — wilds rincon
– wilds rincon, Commented May 24, 2020 at 23:30

Mark Leong · Accepted Answer · 2020-10-02 08:57:54Z

The xxx$ | async as xxx syntax is only supported in the *ngIf directive. The error you faced is because you are using it in a component input binding.

You don't need it if you are only making one subscription, but if you really wanted to you'd need to do something like:

<app-weather-card *ngIf="weatherService.weather$ | async as weather" [weather]="weather"></app-weather-card>

It is referred to in the documentation as "Storing a conditional result in a variable":

You might want to show a set of properties from the same object. If you are waiting for asynchronous data, the object can be undefined. In this case, you can use ngIf and store the result of the condition in a local variable as shown in the the following example.

This code uses only one AsyncPipe, so only one subscription is created. The conditional statement stores the result of userStream|async in the local variable user. You can then bind the local user repeatedly.

https://angular.io/api/common/NgIf#storing-a-conditional-result-in-a-variable

Collectives™ on Stack Overflow

Error in template parse errors in component angular 9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related