CODEWITHSUNDEEP
angular
Mike3355
Mike3355

Reputation: 12081

At input() not working

I am relearning a few things in Angular because I had to step away from it for a while because of other oblations. @Input() should be working but for some reason it is not and I am not getting any errors.

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

    @Input() isLoadings: boolean;
    @Input() parentData = 'Data from parent';

  constructor() { }

  ngOnInit() { }

}

Child component:

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

    quote: string;
    isLoading: boolean;
    name: string;
    childMessage: string;

html:

<app-loader [isLoadings]="isLoading" [parentData]="childMessage">{{childMessage}}</app-loader>

the below works.

[isLoadings]="isLoading"

Why doesn't:

[parentData]="childMessage"

Upvotes: 1

Views: 68

Answers (1)

Vega
Vega

Reputation: 28701

child: LoaderComponent 

@Input() parentData:string;

parent: HomeComponent

childMessage ='Data from parent';

@Input in child component should receive the 'message' from the parent component, not the reverse. isLoading works, because in both places it = false (default value for boolean type), and also the fact that you named both properties on the parent and the child maybe misleading you (but you can keep that way).

Refactoring your example:

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

  @Input() isLoadings: boolean;
  @Input() parentData = '';

  constructor() { }

  ngOnInit() { }

}

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

export class HomeComponent implements OnInit {
   quote: string;
   isLoading: boolean;
   name: string;
   childMessage ='Data from parent';

.....

Upvotes: 2

Related Questions