Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

449
Visualizações
What is the alternative for "ng-include" in angular2?

Is there any alternate way in angular to achieve what ng-include does in angularjs?

about 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

The closest to ng-include is ngTemplateOutlet directive. You need to pass a TemplateRef to it and optional context. Something like that:

@Component({
  selector: 'child',
  template: `
    <div>
      here is child template that includes myTemplate
      <ng-container [ngTemplateOutlet]="myTemplate"></ng-container>
    </div>`
})
export class ChildComponent {
  @Input() myTemplate: TemplateRef<any>;
}


@Component({
  selector: 'app-root',
  template: `
    <p>Parent</p>
    <child [myTemplate]="myTemplate"></child>
    <ng-template #myTemplate>hi julia template!</ng-template>
  `
})
export class AppComponent {
  @ViewChild('myTemplate', {read: TemplateRef}) myTemplate: TemplateRef<any>;
}
  1. Parent component querys the template and passes it to the child component
  2. Child component uses ngTemplateOutlet directive to create view and render it.
about 4 years ago · Santiago Trujillo Relatório

0

//ng-include equivalent in Angular2/4
// How to create directive for ng-clude in Angular2/4
import {
    Directive,
    ElementRef,
    Input,
    OnInit
} from '@angular/core';
import {
    Headers,
    Http,
    Response
} from '@angular/http';

@Directive({
    selector: 'ngInclude'
})
export class NgIncludeDirective implements OnInit {

    @Input('src')
    private templateUrl: string;
    @Input('type')
    private type: string;

    constructor(private element: ElementRef, private http: Http) {

    }
    parseTemplate(res: Response) {
        if (this.type == 'template') {
            this.element.nativeElement.innerHTML = res.text();
        } else if (this.type == 'style') {
            var head = document.head || document.getElementsByTagName('head')[0];
            var style = document.createElement('style');
            style.type = 'text/css';
            style.appendChild(document.createTextNode(res.text()));
            head.appendChild(style);
        }
    }
    handleTempalteError(err) {

    }
    ngOnInit() {
        this.
        http.
        get(this.templateUrl).
        map(res => this.parseTemplate(res)).
        catch(this.handleTempalteError.bind(this)).subscribe(res => {
            console.log(res);
        });
    }

}

enter code here

    // html code

    <
    ngInclude src = "{{src}}"
type = "template" > < /ngInclude>
about 4 years ago · Santiago Trujillo Relatório

0

Thinking from angular2+ way it's better to declare the child template as component:

@Component({
  selector: 'app-child', 
  template: `
    <ng-container>
      here is child template that includes myTemplate
    </ng-container>`
})
export class ChildComponent {
}


@Component({
  selector: 'app-root',
  template: `
    <p>Parent</p>
    <app-child ></app-child>
  `
})
export class AppComponent {
}
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda