Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unable to use ng-include in angular 5

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.

like image 668
Sannu Avatar asked Feb 01 '18 04:02

Sannu


People also ask

What is required with Ng include directive?

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.

Does Ng include create a new scope?

ngInclude creates a new child scope which inherits scope values from the parent controller.

Can we use NG click in Div?

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.


1 Answers

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>
like image 86
Daniel Avatar answered Nov 16 '22 02:11

Daniel