Develop Reference

Reuse html template in Angular project

I have this html template file, range-details-dialog.tpl.html
<div class="modal-header clearfix text-left">
<h5>Update Range</h5>
</div>
<div class="modal-body">
<form name="form" role="form" class="ng-pristine ng-valid" novalidate ng-submit="updateRange()">
<div class="form-group-attached">
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-default input-group p-l-10 p-r-10" ng-class="{ 'has-error' : form.$invalid }">
<p ng-show="form.rangeDaily.$error.min" class="help-block">Daily range more than £5</p>
</div>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4 m-t-10 sm-m-t-10">
<button type="button" class="btn btn-primary btn-block m-t-5"
ng-disabled="form.$invalid || promise" promise-btn="promise" ng-click="updateRange()">Update</button>
</div>
</div>
</div>
Then I want to have another file forced-range-details-dialog.tpl.html
These two files could be one file instead with dynamically populated placeholders.
These are the places were substitution would be needed:
<h5>Update Range</h5> would become <h5>Update Forced Range</h5>
<p ng-show="form.rangeDaily.$error.min" class="help-block">Daily range more than £5</p>
would become:
<p ng-show="form.forcedRangeDaily.$error.min" class="help-block">Forced Daily range more than £5</p>
ng-disabled="form.$invalid || promise" promise-btn="promise" ng-click="updateRange()">Update</button>
, ng-disabled="form.$invalid || promise" promise-btn="promise" ng-click="updateForcedRange()">Update</button>
Is there a way to avoid having two separate template files for the above? Could you please provide some examples, links, or pointers as to how that can be achieved?
Also, I see in the answers that a solution would be to add a boolean parameter inside the component and then call it twice. I am not sure how to call the component though. I have pasted my component below:
angular.module('app.investment.rangeDetails')
.component('pxForcedLimitAmount', {
templateUrl: '/assets/js/apps/range/range-details-dialog.tpl.html',
bindings: {
amount: '<',
isRequest: '<?',
requestedAt: '<?',
#Input() isForced: boolean //<<----I added this based on answers below
},
controller: [function () {
var ctrl = this;
ctrl.$onInit = function () {
ctrl.isRequest = ctrl.isRequest === true || false;
};
}],
});

Seems like only the placeholders need to change, so you can use a variable to decide what placeholder to display on the template. For example:
isForced: boolean;
ngOnInit() {
this.isForced = true; // decide how you want to toggle this
}
on the template:
<h5 *ngIf="!isForced">Update Range</h5>
<h5 *ngIf="isForced">Update Forced Range</h5>
and
<p *ngIf="!isForced" ng-show="form.rangeDaily.$error.min" class="help-block">
Daily range more than £5</p>
<p *ngIf="isForced" ng-show="form.forcedRangeDaily.$error.min" class="help-block">
Forced Daily range more than £5</p>
you can do the same for other tags as well.
From the comments, one way to "determine" the value for isForced is to introduce an input property to the component i.e.
#Input() isForced: boolean;
and invoke the component from elsewhere like:
<app-user [isForced]="true"></app-user>

You can use inputs.Write a component which takes input, and render it in html. then call this component in desired places with its selector
For events use output
See the doc https://angular.io/guide/inputs-outputs

Showing changes without refreshing in VueJS

I'm so new in VueJS and still don't control much of its funcionalities,
I'm trying when I update or delete something in my window not need to refresh to see the changes...how can I do it, please?
My functions work perfectly in my controller, just need to solve the question of seeing changes.
Here I post my code if it helps...thank you very much!!
UpdateProfile.vue:
<div class="field">
<label class="label">Schedules</label>
<!--Edit and Delete Schedules-->
<div v-for="schedule in sortedDays(data.schedulesDisplayed)" class="control">
<div class="container">
<div class="field">
<label class="label">Week Day: {{schedule.week_day}}</label>
</div>
<div class="row">
<div class="col">
<div class="row">
Opening Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.opening_time">
</div>
</div>
<div class="col">
<div class="row">
Closing Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.closing_time">
</div>
</div>
</div>
<div class="field">
<div class="buttons is-left">
<div class="button is-info" #click="updatePubSchedule(schedule)">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Save</span>
</div>
<div class="button is-danger" #click="deletePubSchedule(schedule)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete Schedule</span>
</div>
</div>
</div>
</div>
</div>
</div>
updatePubSchedule(schedule){
var instance = this;
this.api.put('/pubschedules/update/' + this.data.id, schedule).then(response => {
console.log(schedule);
//data = response.data;
instance = response.data;
});
},
deletePubSchedule(schedule){
var instance = this;
this.api.delete('/pubschedules/delete/' + this.data.id, schedule).then(response => {
//data = response.data;
instance = response.data;
});
},
And in my controller:
/**
* #param Pub $pub
*/
public function updatePubSchedule(Pub $pub)
{
//json_die(request()->all());
Schedule::where([
['pub_id','=', $pub->id],
['week_day' ,'=', request()->get('week_day')]
])->update(request()->all());
}
/**
* #param Pub $pub
*/
public function deletePubSchedule(Pub $pub)
{
Schedule::where([
['pub_id','=', $pub->id],
['week_day' ,'=', request()->get('week_day')]
])->delete();
}

I don't know how you get your initial data but you can have a GET request that gets fresh data from the laravel after you update/delete initial data.
With the response from that request you can update your data.schedulesDisplayed prop.
Important! You need to set the :key attribute in the div that uses v-for rendering like this
<div v-for="(schedule, index) in sortedDays(data.schedulesDisplayed)" :key="index" class="control">
I used the index for the sake of this example but you should use a unique property of sortedDays return.

How to edit passed data from parent to child component in Angular 4

I have parent component with all teams and child component for displaying each of team in box using *ngFor and #Input. All child components are displayed fine but when I want to change each of them opening modal I always get the data from first object in array of teams.
team.component.html
<app-team-box *ngFor="let team of teams" [team]="team"></app-team-box>
team-box.component.html
<div class="ibox">
<div class="ibox-title">
<h5>{{this.team.name}}</h5>
<a class="btn btn-xs" (click)="openEditTeamModal(this.team)">Edit</a>
</div>
</div>
<div class="modal fade" id="edit_team_modal">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" (ngSubmit)="editTeam()" novalidate>
<div class="modal-body">
<div class="row" *ngIf="this.team">
<label>Team name:</label>
<input type="text" id="name" name="name" [(ngModel)]="this.team.name" #name="ngModel">
</div>
</div>
<div class="modal-footer">
<button type="submit">Save</button>
</div>
</form>
</div>
</div>
team-box.component.ts
export class TeamBoxComponent implements OnInit {
#Input() team;
constructor(private teamService: TeamService) {}
openEditTeamModal(selectedTeam): void {
this.team = selectedTeam;
$("#edit_team_modal").modal();
$(".modal").appendTo("html");
}
editTeam(): void {
this.teamService.update(this.team).subscribe((team: Response) => {
$("#edit_team_modal").modal("hide");
});
}
}
The problem is when I change first one everything is fine, modal is populated with name and after changing it's get saved. But when I click on edit button for example second team, in modal I get the data for first team. Why this.team is always referencing to first object in array of teams?

Conditionally tick the checkbox in modal dialog in Angular

I have a bootstrap modal dialog which contains some checkboxes. Each checkbox represents a category from the database and I need to tick the checkbox only if the user is interested on that category.
following is my html for the modal
<div *ngIf="_user" id="categoryModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" id="categoryDiv">
<div class="row">
<div *ngIf="_tenderCategories">
<span *ngFor="let category of _tenderCategories; let i = index;">
<div class="col-md-4">
<div class="checkbox">
<label>
<input id={{category.id}} type="checkbox" class="category-checkbox" [checked]="isUserInterested(category)" (change)="onCategoryCheckBoxClick(category)">
<p class="tender-category" style="cursor: pointer;">{{category.name}}</p>
</label>
</div>
</div>
</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
As you can see, in order to tick the checkbox, I call the function isUserInterested(category).
The problem I face is, when the page reloads only, the function I mentioned gets called. The modal above appears when I click a link on my html page; but the function does not get called in that case. By the time I click the above mentioned link, the component has all the data required for the function to execute.
isUserInterested(category: Category) {
if (this._user.interestedCategories.indexOf(category) > -1) {
// if the _user.interestedCategories list contaians the category, that category should be shown as marked
console.log("Category "+category.id+" interested");
return true;
} else {
return false;
}
}
Why I am not getting the expected behavior? How can I get this implemented in the way I expect?

You should be using ngModel to achieve this as below,
<input id={{category.id}} type="checkbox" class="category-checkbox"
[ngModel]="isUserInterested(category)"
(ngModelChange)="onCategoryCheckBoxClick(category)">
Update 1 : Inside Modal dialog
The child model should contain the users object as below,
#Input() users?:any[];
Method will be as
isUserInterested(c){
if(this.category.interestedCat.indexOf(c) > -1){
console.log(c)
return true;
}
else {
return false
}
}
Updated LIVE DEMO

AngularJS with Foundation - Controller in Reveal Modal does not work

I have not much experience when it comes to use AngularJS, but I am not a newbie. Worked with it already a little bit.
However, I am using AngularJS with Zurb Foundation 6.
The Controller in my reveal Modal will not use any angular.
For example I can write {{hallo}} and he will not render it, he will show me {{hallo}} and not the value of this variable.
You have to know, that this modal is in a template file for angular, because I am using angular-route.
The strange thing is, that I am already using a modal in the index.html file and there angular in the modal works. But the modal in the template file (called dashboard.html) is not working.
That's my modal:
<div class="row">
<div class="columns large-12 medium-12 small-12" ng-controller="LoadAllUsers">
<button class="button" data-open="newUserModal" ng-click="load()">User hinzufügen</button>
<!-- newUserModal -->
<div class="tiny reveal" id="newUserModal" data-reveal>
<div class="large-12 medium-12 small-12 columns">
<div class="row">
<h4 class="text-center">User zur Miete hinzufügen</h4>
<br>
<label>Username oder Name des neuen Users eingeben</label>
<input type="text" placeholder="Max Mustermann" name="newuser" ng-model="userSearch" ng-change="search()">
<h5>Suchtreffer</h5>{{hallo}}
<button class="button" data-close>Abbrechen</button>
<button class="button float-right">User hinzufügen</button>
</div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /newUserModal -->
<button class="button">Miete zurückziehen</button>
</div>
</div>
</div>
My controller looks like this
routingApp.controller("LoadAllUsers", function($scope, $http) {
$scope.load = function() {
var allUsers = [];
$http({
method: 'GET',
url: 'someURL',
params: {parameters: "values"}
}).then(function successCallback(response) {
angular.forEach(response.data, function(value, key) {
allUsers[key] = {};
angular.forEach(value, function(subvalue, subkey) {
allUsers[key][subkey] = subvalue;
});
});
$scope.hallo = "AN";
console.log(allUsers);
}, function errorCallback(error) {
console.log(JSON.stringify(error.data));
});
};
$scope.search = function() {
console.log($scope.userSearch);
};
$scope.hallo = "HAAAAAAAAAAALLO";
});
I would appreciate, if anyone can help me.
Thanks

I found the solution: I hat to user Angular Foundation 6. What you have to know is that it is now currently under work, so it may be not as stable as Angular Foundation 5.
However, it helped me solving my problem.