So in angularjs you had the possibility to define a directive and bind the html template to an already existing controller. In principal this meant you could reuse the controller for multiple directives, therefore for multiple templates.
angular
.module('App')
.component('Name', {
templateUrl: 'some.html',
controller: 'someController'
});
How can this be performed in Angular. As far as I understood it in Angular Components are directives and always directly bind the html. Basically I want to use another view which only changes the html but keeps the same functionality.
Edit:
Basically I want this:
@Component({
selector: 'jhi-exercise-list',
templateUrl: '(MULTIPLE HTML TEMPLATE PATHS HERE)',
providers: [
]
})
export class className{
//USING THE SAME COMPONENT CODE FOR THE MULTIPLE TEMPLATES
constructor(){}
}
The only option I found so far would be through extending but I think thats overkill.
templateUrl
as a function You can specify templateUrl
as a string representing the URL or as a function which takes two arguments tElement
and tAttrs
.
The function takes the following arguments:
tElement
- template element - The element where the directive has been declared.
tAttrs
- template attributes - Normalized list of attributes declared on this element.
For more information, see AngularJS Comprehensive Directive API Reference - templateURL
After more research it still seems that the best solution I could come up with is using inheritance.
https://coryrylan.com/blog/angular-component-inheritance-and-template-swapping
He has a rather nice description of it
Thank you to all who helped me ;)
There must be some directive in angularjs as ng-if or something like that.
In Angular 4 you can do this as one of way as
<div *ngIf="x === 1"></div>
<div *ngIf="x === 2"></div>
And you can pass the value of x according to your need.
Added Solution
import { Component, Input } from '@angular/core';
import { Blogger } from '../models/blogger';
import { BloggerProfileService } from '../service/blogger-profile.service';
import { SharedService } from '../service/shared.service';
import { AuthService } from '../auth-service.service';
import { Router } from '@angular/router';
@Component({
selector: 'article-author-panel',
templateUrl: './article-author-panel.component.html',
styleUrls: ['./article-author-panel.component.css']
})
export class ArticleAuthorPanelComponent {
@Input('templateType') templateType;
author;
blogger : Blogger;
articleDt;
user;
@Input()
get articleDate(){
return this.articleDt;
}
set articleDate(date){
this.articleDt = this.sharedService.getUTCDate(new Date(date));
}
@Input()
set articleAuthor(author) {
this.author = author;
this.bloggerProfileService.getBlogger(author)
.take(1)
.subscribe((blogger) => {
this.blogger = blogger;
})
}
get articleAuthor() {
return this.author;
}
constructor(
private bloggerProfileService: BloggerProfileService,
private sharedService: SharedService,
private router : Router,
private authService: AuthService
) {
authService.user$
.take(1)
.subscribe((user) => {
if(user) this.user = user;
});
}
clickFollow(){
if(this.user === null || this.user === undefined){
this.router.navigate(['/']);
}
}
}
Template
<ng-container *ngIf="templateType === 1">
<div class="row no-gutters" style="border-top: 1px solid #a0a0a0; padding-top:5px;">
<div class="col-2">
<img src="http://www.publicdomainpictures.net/pictures/170000/velka/spinach-leaves-1461774375kTU.jpg" alt="Person" class="aap-image">
</div>
<div class="col-10">
<div class="row">
<div class="col-9">
<div class="aap-b-detail" *ngIf="blogger">
<span class="aap-b-name">{{ blogger.name }}</span>
<br />
<span class="aap-b-summary">{{ blogger.summary }}</span>
</div>
</div>
<div class="col-3">
<button class="aap-follow" (click)="clickFollow()">Follow</button>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="templateType === 2">
<div class="row no-gutters">
<div class="col-2">
<img src="http://www.publicdomainpictures.net/pictures/170000/velka/spinach-leaves-1461774375kTU.jpg" alt="Person" class="aap-image">
</div>
<div class="col-10">
<div class="row">
<div class="col-9">
<div class="aap-b-detail aap-b-detail-lh" *ngIf="blogger">
<span class="aap-b-name">{{ blogger.name }}</span>
<br />
<span class="aap-b-summary">{{ blogger.summary }}</span>
<br />
<span class="aap-b-date">{{ articleDate }}</span>
</div>
</div>
<div class="col-3">
<button class="aap-follow" (click)="clickFollow()">Follow</button>
</div>
</div>
</div>
</div>
</ng-container>
This is my component which I have created where according to the position I placed the component the layout changes. You can consider it as two different htmls connected together as normal if else keeping the behind code same. According to my demand I did not use each variable. Hope this helps.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadingComponent } from './loading.component'
@NgModule({
imports: [
CommonModule
],
declarations: [LoadingComponent],
exports: [LoadingComponent]
})
export class LoadingModule { }
IN this case am planning to reuse the loading component in multiple places. I will be injecting this module on specif area am intending to use loading component
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.