Angular6 Calling Component From HTML

Question

Giving Angular6 a try. In my Angular1 app, I bind scopes to html like so:

<div ng-controller="MyCtrl">

</div>

Now in Angular6, which is component based, there is:

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']
})

Is there a way to:

1. First output html to a page via Python, PHP, etc

2. Have a component bind to a section of that page that was outputted?

Answer 1

From Angular2 onwards, the structure of an Angular application has totally changed.

There is a root bootstrap module and in it you have a bootstrap component Once your application runs, the root module take control and the bootstrap component is launched. HTML rendering shall be the responsibility of Angular framework now. Server side languages like PHP, Python, C# shall work as providers of REST services that Angular framework will interact with.

So to answer your questions

1.) Angular Components could display HTML based on a call to a RESTful Server Side Service and using *ngIf, *ngFor etc to render data in HTML format as desired.

2.) A parent component can combine multiple components in its template using the component-selector eg

<my-first-component></my-first-component>
<p>some html</p>
<my-second-component [InputProperty]="Some Value"></my-second-component>

etc..