Display const in template with Angular 4 / ionic
I have constants declared in the constructor in my .ts file. I'd like to display their value in the template.
Is it good practices?
EDIT:
import {Component, OnInit, Output} from '@angular/core';
import { NavController } from 'ionic-angular';
import {MemoryEditPage} from "../memory-edit/memory-edit";
@Component({
selector: 'page-memory-list',
templateUrl: 'memory-list.html',
})
export class MemoryListPage implements OnInit {
@Output() k_user: string;
@Output() type: MemoryType = MemoryType.memories;
constructor(
private auth: AuthService,
public navCtrl: NavController,
) {
const monthNames = ['Janvier','Février','Mars','Avil','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
const thisMonth = monthNames[(new Date()).getMonth()];
const dayNames = ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'];
const thisDay = dayNames[(new Date()).getDay() - 1];
const thisDate = (new Date()).getDate();
this.thisDay = thisDay;
this.thisDate = thisDate;
this.thisMonth = thisMonth;
}
}
Template:
<ion-label no-margin text-uppercase color="white">{{thisMonth}}</ion-label>
angular ionic-framework
asked Nov 20 '18 at 6:49
LouisLouis
1,30483575
add a comment |
I have constants declared in the constructor in my .ts file. I'd like to display their value in the template.
Is it good practices?
EDIT:
import {Component, OnInit, Output} from '@angular/core';
import { NavController } from 'ionic-angular';
import {MemoryEditPage} from "../memory-edit/memory-edit";
@Component({
selector: 'page-memory-list',
templateUrl: 'memory-list.html',
})
export class MemoryListPage implements OnInit {
@Output() k_user: string;
@Output() type: MemoryType = MemoryType.memories;
constructor(
private auth: AuthService,
public navCtrl: NavController,
) {
const monthNames = ['Janvier','Février','Mars','Avil','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
const thisMonth = monthNames[(new Date()).getMonth()];
const dayNames = ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'];
const thisDay = dayNames[(new Date()).getDay() - 1];
const thisDate = (new Date()).getDate();
this.thisDay = thisDay;
this.thisDate = thisDate;
this.thisMonth = thisMonth;
}
}
Template:
<ion-label no-margin text-uppercase color="white">{{thisMonth}}</ion-label>
angular ionic-framework
asked Nov 20 '18 at 6:49
LouisLouis
1,30483575
Well, it won't work, so I guess we can say it's not good practice. The view doesn't have access to local variables of the constructor. They're local variables.
– JB Nizet
Nov 20 '18 at 6:52
sorry I forgot a few lines and my code was not functional. My question is still there: is this best practices to put variables withthis.in the constructor or should I put them elsewhere?
– Louis
Nov 20 '18 at 7:56
The monthNames and dayNames don't need to be recreated every time the constructor is invoked. Just store them in a constant, outside of the class. The other local variables are useless. Just initialize the fields directly. Don't recreate a new Date() for each of them: create it once. And note that Angular already have ways to get month and day names.
– JB Nizet
Nov 20 '18 at 8:03
Ok thanks for your comment. Can you point me to "Angular's ways to get month and day names." ?
– Louis
Nov 20 '18 at 22:57
angular.io/api/common/getLocaleMonthNames, angular.io/api/common/getLocaleDayNames, angular.io/guide/i18n
– JB Nizet
Nov 20 '18 at 23:03
add a comment |
I have constants declared in the constructor in my .ts file. I'd like to display their value in the template.
Is it good practices?
EDIT:
import {Component, OnInit, Output} from '@angular/core';
import { NavController } from 'ionic-angular';
import {MemoryEditPage} from "../memory-edit/memory-edit";
@Component({
selector: 'page-memory-list',
templateUrl: 'memory-list.html',
})
export class MemoryListPage implements OnInit {
@Output() k_user: string;
@Output() type: MemoryType = MemoryType.memories;
constructor(
private auth: AuthService,
public navCtrl: NavController,
) {
const monthNames = ['Janvier','Février','Mars','Avil','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
const thisMonth = monthNames[(new Date()).getMonth()];
const dayNames = ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'];
const thisDay = dayNames[(new Date()).getDay() - 1];
const thisDate = (new Date()).getDate();
this.thisDay = thisDay;
this.thisDate = thisDate;
this.thisMonth = thisMonth;
}
}
Template:
<ion-label no-margin text-uppercase color="white">{{thisMonth}}</ion-label>
angular ionic-framework
asked Nov 20 '18 at 6:49
LouisLouis
1,30483575
I have constants declared in the constructor in my .ts file. I'd like to display their value in the template.
Is it good practices?
EDIT:
import {Component, OnInit, Output} from '@angular/core';
import { NavController } from 'ionic-angular';
import {MemoryEditPage} from "../memory-edit/memory-edit";
@Component({
selector: 'page-memory-list',
templateUrl: 'memory-list.html',
})
export class MemoryListPage implements OnInit {
@Output() k_user: string;
@Output() type: MemoryType = MemoryType.memories;
constructor(
private auth: AuthService,
public navCtrl: NavController,
) {
const monthNames = ['Janvier','Février','Mars','Avil','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
const thisMonth = monthNames[(new Date()).getMonth()];
const dayNames = ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'];
const thisDay = dayNames[(new Date()).getDay() - 1];
const thisDate = (new Date()).getDate();
this.thisDay = thisDay;
this.thisDate = thisDate;
this.thisMonth = thisMonth;
}
}
Template:
<ion-label no-margin text-uppercase color="white">{{thisMonth}}</ion-label>
angular ionic-framework
angular ionic-framework
asked Nov 20 '18 at 6:49
LouisLouis
1,30483575
asked Nov 20 '18 at 6:49
LouisLouis
1,30483575
edited Nov 20 '18 at 7:55
Louis
asked Nov 20 '18 at 6:49
LouisLouis
1,30483575
asked Nov 20 '18 at 6:49
LouisLouis
1,30483575
asked Nov 20 '18 at 6:49
LouisLouis
1,30483575
1,30483575
Well, it won't work, so I guess we can say it's not good practice. The view doesn't have access to local variables of the constructor. They're local variables.
– JB Nizet
Nov 20 '18 at 6:52
sorry I forgot a few lines and my code was not functional. My question is still there: is this best practices to put variables withthis.in the constructor or should I put them elsewhere?
– Louis
Nov 20 '18 at 7:56
The monthNames and dayNames don't need to be recreated every time the constructor is invoked. Just store them in a constant, outside of the class. The other local variables are useless. Just initialize the fields directly. Don't recreate a new Date() for each of them: create it once. And note that Angular already have ways to get month and day names.
– JB Nizet
Nov 20 '18 at 8:03
Ok thanks for your comment. Can you point me to "Angular's ways to get month and day names." ?
– Louis
Nov 20 '18 at 22:57
angular.io/api/common/getLocaleMonthNames, angular.io/api/common/getLocaleDayNames, angular.io/guide/i18n
– JB Nizet
Nov 20 '18 at 23:03
add a comment |
Well, it won't work, so I guess we can say it's not good practice. The view doesn't have access to local variables of the constructor. They're local variables.
– JB Nizet
Nov 20 '18 at 6:52
sorry I forgot a few lines and my code was not functional. My question is still there: is this best practices to put variables withthis.in the constructor or should I put them elsewhere?
– Louis
Nov 20 '18 at 7:56
The monthNames and dayNames don't need to be recreated every time the constructor is invoked. Just store them in a constant, outside of the class. The other local variables are useless. Just initialize the fields directly. Don't recreate a new Date() for each of them: create it once. And note that Angular already have ways to get month and day names.
– JB Nizet
Nov 20 '18 at 8:03
Ok thanks for your comment. Can you point me to "Angular's ways to get month and day names." ?
– Louis
Nov 20 '18 at 22:57
angular.io/api/common/getLocaleMonthNames, angular.io/api/common/getLocaleDayNames, angular.io/guide/i18n
– JB Nizet
Nov 20 '18 at 23:03
Well, it won't work, so I guess we can say it's not good practice. The view doesn't have access to local variables of the constructor. They're local variables.
– JB Nizet
Nov 20 '18 at 6:52
Well, it won't work, so I guess we can say it's not good practice. The view doesn't have access to local variables of the constructor. They're local variables.
– JB Nizet
Nov 20 '18 at 6:52
sorry I forgot a few lines and my code was not functional. My question is still there: is this best practices to put variables with
this. in the constructor or should I put them elsewhere?– Louis
Nov 20 '18 at 7:56
sorry I forgot a few lines and my code was not functional. My question is still there: is this best practices to put variables with
this. in the constructor or should I put them elsewhere?– Louis
Nov 20 '18 at 7:56
The monthNames and dayNames don't need to be recreated every time the constructor is invoked. Just store them in a constant, outside of the class. The other local variables are useless. Just initialize the fields directly. Don't recreate a new Date() for each of them: create it once. And note that Angular already have ways to get month and day names.
– JB Nizet
Nov 20 '18 at 8:03
The monthNames and dayNames don't need to be recreated every time the constructor is invoked. Just store them in a constant, outside of the class. The other local variables are useless. Just initialize the fields directly. Don't recreate a new Date() for each of them: create it once. And note that Angular already have ways to get month and day names.
– JB Nizet
Nov 20 '18 at 8:03
Ok thanks for your comment. Can you point me to "Angular's ways to get month and day names." ?
– Louis
Nov 20 '18 at 22:57
Ok thanks for your comment. Can you point me to "Angular's ways to get month and day names." ?
– Louis
Nov 20 '18 at 22:57
angular.io/api/common/getLocaleMonthNames, angular.io/api/common/getLocaleDayNames, angular.io/guide/i18n
– JB Nizet
Nov 20 '18 at 23:03
angular.io/api/common/getLocaleMonthNames, angular.io/api/common/getLocaleDayNames, angular.io/guide/i18n
– JB Nizet
Nov 20 '18 at 23:03
add a comment |
1 Answer
1
active
oldest
votes
It can't be considered as a practice in the first place as you can't do it. You can only access a Component's (public) Properties and methods in your Component's Template.
You'll have to define a property on your Component for that.
...
@Component({...})
export class MemoryListPage implements OnInit {
...
thisMonth;
constructor(...) {
...
const thisMonth = monthNames[(new Date()).getMonth()];
this.thisMonth = thisMonth;
...
}
}
And then use it in your template:
<ion-label
no-margin
text-uppercase
color="white">
{{thisMonth}}
</ion-label>
UPDATE:
Answering your updated question, it's not really a good practice to write any instantiation logic in the constructor. It should be written in ngOnInit. Even the Angular's Official Docs vouch for this:
Experienced developers agree that components should be cheap and safe to construct.
Misko Hevery, Angular team lead, explains why you should avoid complex constructor logic.
answered Nov 20 '18 at 8:07
SiddAjmeraSiddAjmera
15.5k31238
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387650%2fdisplay-const-in-template-with-angular-4-ionic%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It can't be considered as a practice in the first place as you can't do it. You can only access a Component's (public) Properties and methods in your Component's Template.
You'll have to define a property on your Component for that.
...
@Component({...})
export class MemoryListPage implements OnInit {
...
thisMonth;
constructor(...) {
...
const thisMonth = monthNames[(new Date()).getMonth()];
this.thisMonth = thisMonth;
...
}
}
And then use it in your template:
<ion-label
no-margin
text-uppercase
color="white">
{{thisMonth}}
</ion-label>
UPDATE:
Answering your updated question, it's not really a good practice to write any instantiation logic in the constructor. It should be written in ngOnInit. Even the Angular's Official Docs vouch for this:
Experienced developers agree that components should be cheap and safe to construct.
Misko Hevery, Angular team lead, explains why you should avoid complex constructor logic.
answered Nov 20 '18 at 8:07
SiddAjmeraSiddAjmera
15.5k31238
add a comment |
It can't be considered as a practice in the first place as you can't do it. You can only access a Component's (public) Properties and methods in your Component's Template.
You'll have to define a property on your Component for that.
...
@Component({...})
export class MemoryListPage implements OnInit {
...
thisMonth;
constructor(...) {
...
const thisMonth = monthNames[(new Date()).getMonth()];
this.thisMonth = thisMonth;
...
}
}
And then use it in your template:
<ion-label
no-margin
text-uppercase
color="white">
{{thisMonth}}
</ion-label>
UPDATE:
Answering your updated question, it's not really a good practice to write any instantiation logic in the constructor. It should be written in ngOnInit. Even the Angular's Official Docs vouch for this:
Experienced developers agree that components should be cheap and safe to construct.
Misko Hevery, Angular team lead, explains why you should avoid complex constructor logic.
answered Nov 20 '18 at 8:07
SiddAjmeraSiddAjmera
15.5k31238
add a comment |
It can't be considered as a practice in the first place as you can't do it. You can only access a Component's (public) Properties and methods in your Component's Template.
You'll have to define a property on your Component for that.
...
@Component({...})
export class MemoryListPage implements OnInit {
...
thisMonth;
constructor(...) {
...
const thisMonth = monthNames[(new Date()).getMonth()];
this.thisMonth = thisMonth;
...
}
}
And then use it in your template:
<ion-label
no-margin
text-uppercase
color="white">
{{thisMonth}}
</ion-label>
UPDATE:
Answering your updated question, it's not really a good practice to write any instantiation logic in the constructor. It should be written in ngOnInit. Even the Angular's Official Docs vouch for this:
Experienced developers agree that components should be cheap and safe to construct.
Misko Hevery, Angular team lead, explains why you should avoid complex constructor logic.
answered Nov 20 '18 at 8:07
SiddAjmeraSiddAjmera
15.5k31238
It can't be considered as a practice in the first place as you can't do it. You can only access a Component's (public) Properties and methods in your Component's Template.
You'll have to define a property on your Component for that.
...
@Component({...})
export class MemoryListPage implements OnInit {
...
thisMonth;
constructor(...) {
...
const thisMonth = monthNames[(new Date()).getMonth()];
this.thisMonth = thisMonth;
...
}
}
And then use it in your template:
<ion-label
no-margin
text-uppercase
color="white">
{{thisMonth}}
</ion-label>
UPDATE:
Answering your updated question, it's not really a good practice to write any instantiation logic in the constructor. It should be written in ngOnInit. Even the Angular's Official Docs vouch for this:
Experienced developers agree that components should be cheap and safe to construct.
Misko Hevery, Angular team lead, explains why you should avoid complex constructor logic.
answered Nov 20 '18 at 8:07
SiddAjmeraSiddAjmera
15.5k31238
answered Nov 20 '18 at 8:07
SiddAjmeraSiddAjmera
15.5k31238
answered Nov 20 '18 at 8:07
SiddAjmeraSiddAjmera
15.5k31238
answered Nov 20 '18 at 8:07
SiddAjmeraSiddAjmera
15.5k31238
15.5k31238
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387650%2fdisplay-const-in-template-with-angular-4-ionic%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Well, it won't work, so I guess we can say it's not good practice. The view doesn't have access to local variables of the constructor. They're local variables.
– JB Nizet
Nov 20 '18 at 6:52
sorry I forgot a few lines and my code was not functional. My question is still there: is this best practices to put variables with
this.in the constructor or should I put them elsewhere?– Louis
Nov 20 '18 at 7:56
The monthNames and dayNames don't need to be recreated every time the constructor is invoked. Just store them in a constant, outside of the class. The other local variables are useless. Just initialize the fields directly. Don't recreate a new Date() for each of them: create it once. And note that Angular already have ways to get month and day names.
– JB Nizet
Nov 20 '18 at 8:03
Ok thanks for your comment. Can you point me to "Angular's ways to get month and day names." ?
– Louis
Nov 20 '18 at 22:57
angular.io/api/common/getLocaleMonthNames, angular.io/api/common/getLocaleDayNames, angular.io/guide/i18n
– JB Nizet
Nov 20 '18 at 23:03