Menu
Pretty new to Angular and doing a small pilot project using Angular 5 and Visual Code. I am trying to use ng-include and the template doesn't get displayed.
src
add-device
add-device.component.html
add-device.component.scss
add-device.component.spec.ts
add-device.component.ts
edit-device
edit-device.component.html
edit-device.component.scss
edit-device.component.spec.ts
edit-device.component.ts
templates
device.html
app.module.ts
app.coponent.ts
app.component.html
....
simple device.html code
<div>Include is working!</div>
add-device.component.html
<div ng-include="" src="'templates/device.html'">
<div>More unique elements here!</div>
</div>
I also tried following
<div ng-include="" src="'templates/device.html'"></div>
<div ng-include="'templates/device.html'"></div>
Following gives error, ng-include is not recognized.
<ng-include src="'templates/device.html'"></ng-include>
Objective is to use device.html template code from both add and edit device components. I am using typescript to manage the project. When i look at the Sources in debugger, i do not even see device.html file in source list.
668
The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename. By default, the included file must be located on the same domain as the document.
ngInclude creates a new child scope which inherits scope values from the parent controller.
Syntax of using ng-click directive There, the button is an element that can be replaced by any other HTML element like a link, span, paragraph, div etc.
Angular doesn't have a ng-include as AngularJS used to have.
In Angular, you can create a component like this:
@Component({
selector: 'app-device',
templateUrl: './device.html'
})
class DeviceComponent {}
And then, instead of:
<div ng-include="'templates/device.html'">
you do:
<app-device></app-device>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
