angular - When we need to import component (parent/child) in another component (child/parent)? -

i following tutorial in angular official website (https://angular.io/tutorial/toh-pt3).

1. when learn how parent component (appcomponent) communicate child component(herodetailcomponent), since add in parent component's template, <hero-detail [hero]="selectedhero"></hero-detail>, looks me parent component talks child component, why not import child component parent component (import { herodetailcomponent } './hero-detail.component'; ) , import parent component child component (import { appcomponent } './app.component';)?

2. if not that, how can angular know how works ([hero]="selectedhero")? 'hero' child component's property, 'selectedhero' parent component's property?

3. when should need import component? when not need to?

i think don't quite understand why need imports. essentially, modules allow split code different files. suppose have following in 1 file/module:

class acomp {}  class bcomp {    constructor() {        // creates new instance of acomp        new acomp();    } } 

now, can see here bcomp uses reference acomp class create instance of class. decide split these classes different modules/classes:

----------------------------- a-comp.js -----------------------------  class acomp {}  ----------------------------- b-comp.js -----------------------------  class bcomp {    constructor() {        // creates new instance of acomp        new acomp();    } } 

if run b-comp.js javascript engine throw error because there's no acomp class in b-comp.js file/module. need tell js engine acomp. , importing:

import { acomp } 'a-comp'; class bcomp {    constructor() {        // creates new instance of acomp        new acomp();    } } 

now work fine.

when should need import component? when not need to?

as can see had use import because use acomp class reference in b-comp.js file/module. if didn't use acomp class reference in bcomp file/module, there no need import acomp class.

...why not import child component parent component

as can see tutorial, neither appcomponent class uses herodetailcomponent class reference directly in file/module code, nor herodetailcomponent uses appcomponent class reference. there's no need import them.

if not that, how can angular know how works ([hero]="selectedhero")? 'hero' child component's property, 'selectedhero' parent component's property?

because can inferred information presented in parent appcomponent template , angular compiler uses syntax [hero]="selectedhero" required information.