3-Components/sub-components/ng-content

Components:

(i)Root component 
 In reference to the automated template Angular project(refer 1st link), The project already has a Root component generated by default. The Root component related files(listed below) gets generated in the location, c: users\someone\project-location\projectname>

(ii)sub-components
>>access the terminal frmo within the atom editor to generate sub components for the Angular app by navigating to "Packages>>platform-ide-terminal>>New Terminal".
>>This will open up a terminal for the relative Angular app with the location :
c: users\someone\project-location\projectname>.
>>Enter the below commands to naviagate to the src/app folder of the project,
c: users\someone\project-location\projectname> cd .\src\app
>>Then, Execute the below command to generate sub Components under the Root Component location: c: users\someone\project-location\projectname\src\app> ng generate component <<component-name>>
note: 


Lets call the sub component as "home"

Hence now, the below files are created for the "home" component under the Root component "app", as below:

• the "apps.modules.ts" file updates the new component created
• the ---.ts file defines the required component definition along with the relative properties as in the content of the .ts file content for the created sub-component below:

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

@Component

({

 selector: 'app-home',

 templateUrl: './home.component.html',

 styleUrls: ['./home.component.css']

})

export class HomeComponent implements OnInit 

{

titleStrFromHomeComponent ="Demo of String interpolation";

constructor() { }

  ngOnInit() 

  {

  }

}

//Implement OnInit triggers the ngOnInit() method first to initialiaze any variables within this //method when this component(Home) is called. also, notie that the import also imports the //implemented class OnInit

Embedding the sub-component in the Root component view:

• Every Component file(.ts) file has a directive, @Component defined.
• every Component directive has a set of properties as below, which configures a component with related view(.html), style(.css), tag(used in html files):
• selector: 'app-home',
• templateUrl: './home.component.html',
• styleUrls: ['./home.component.css']
• selector property specifies the tag value used as below in the view(.html files)

_______________________________________________________________________

Now, refresh the localhost link to see the results: http://localhost:4200


_______________________________________________________________________

<ng-content></ng-content> in .html files of the related component, enables the functioning of content that is added in the <selector tag of the component>,
If this tag is not inlcuded, then anything that is added within the component selector tag of the Root html file will be disabled. See the example below when
(1)<ng-content></ng-content>  used
(2)<ng-content></ng-content>  not used

(1)<ng-content></ng-content>  used



(2)<ng-content></ng-content>  not used

_______________________________________________________________________