Uncaught Error: Template parse errors: Can't bind to 'profiles' since it isn't a known property of 'app-trnmnt-name'

Question

My error

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'profiles' since it isn't a known property of 'app-trnmnt-name'.
1. If 'app-trnmnt-name' is an Angular component and it has 'profiles' input, then verify that it is part of this module.
2. If 'app-trnmnt-name' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (""../../assets/imgs/Coverr.jpg" width="1600px" height="500px">
 <app-cup></app-cup>
<app-trnmnt-name [ERROR ->][profiles]="title"></app-trnmnt-name>
<app-sprt-type></app-sprt-type>
<app-trnmnt-type></app-trnmnt-t"): ng:///AppModule/CoverComponent.html@4:17
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
    at compiler.js:23948
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)

my data can not be link with other component i get data from profile.component.ts and made diffent component like tornamnt name tournamnt type and all i connect my tournamnet name component to cover component by to html of cover.component

i want to get data from profile.component.ts to cover.ts

following are my files

trnmntName.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-trnmnt-name',
  templateUrl: './trnmnt-name.component.html',
  styleUrls: ['./trnmnt-name.component.css']
})
export class TrnmntNameComponent implements OnInit {

  constructor() { }
  Title="Tournament Name";
  ngOnInit() {
  }

}

profile.component.ts

import { Component, OnInit,Input } from '@angular/core';
import {ProfileService} from '../profile.service'
@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
@Input()
export class ProfileComponent implements OnInit {

  @Input() public profiles;
  constructor(public profservice:ProfileService) { }

  ngOnInit() {

    this.profservice.getProfile()
    .subscribe(data => {
      console.log(data)
      this.profiles =data
    });

  }

}

cover.component.html

<div class="cover">
  <!-- <a href ="http://one-louve-dev.appspot.com/search">  -->
 <img src="../../assets/imgs/Coverr.jpg" width="1600px" height="500px">
 <app-cup></app-cup>
<app-trnmnt-name [profiles]="title"></app-trnmnt-name>
<app-sprt-type></app-sprt-type>
<app-trnmnt-type></app-trnmnt-type>
<app-date-location></app-date-location>









</div>

Answer 1

Add the input property profile to app-trnmnt-name component.

export class TrnmntNameComponent implements OnInit {

  @Input()
  profiles: Your_data_type

  constructor() { }
  Title="Tournament Name";
  ngOnInit() {
  }

}