Ggtcf

Is there a problem with hiding "forgot password" until it's needed?

Would this custom Sorcerer variant that can only learn any verbal-component-only spell be unbalanced?

Increase performance creating Mandelbrot set in python

How does buying out courses with grant money work?

Flow chart document symbol

How can I get through very long and very dry, but also very useful technical documents when learning a new tool?

How to run a prison with the smallest amount of guards?

Is exact Kanji stroke length important?

A Rare Riley Riddle

How do I find the solutions of the following equation?

Crossing the line between justified force and brutality

Roman Numeral Treatment of Suspensions

How do scammers retract money, while you can’t?

Is it appropriate to ask a job candidate if we can record their interview?

How did Arya survive the stabbing?

What is paid subscription needed for in Mortal Kombat 11?

How to write papers efficiently when English isn't my first language?

Return the Closest Prime Number

How can I kill an app using Terminal?

Is expanding the research of a group into machine learning as a PhD student risky?

Large drywall patch supports

What is the difference between "behavior" and "behaviour"?

How do I rename a Linux host without needing to reboot for the rename to take effect?

Go Pregnant or Go Home

Angular 7 issue with passing value to components html

Angular HTML bindingWhat does “… resolves to a non-module entity and cannot be imported using this construct” mean?how to import highcharts offline-exporting in typescriptHow to use feathers-client and superagent in Angular 2?Error with combining Array types? Error: Cannot invoke an expression whose type lacks a call signatureCannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signaturesCannot invoke an expression whose type lacks a call signature, mapCannot invoke an expression whose type lacks a call signature … has no compatible call signaturesHow to use delay with HTTPClient Rxjs 6.3.0Property trigger does not exist on type data:String Jquery in Angular ts file

-3

I am trying something very simple but I keep getting an error:

Here is the code:

app.component.html

<div class="col-md-myvalue">stuff here</div>

app.component.ts

myvalue: string;


ngOnInit() 
 this.myvalue('6');

For some reason it's giving me this error:

Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.

What I'm I doing wrong here?

angular typescript angular7

share|improve this question

asked Mar 8 at 11:30

Paul B2001Paul B2001

43

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  You can't call a string, it's not a function. this.myvalue = '6';
  
  – ritaj
  Mar 8 at 11:31
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  you also should use [ngClass]='"
  
  – Yanis-git
  Mar 8 at 11:33
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Angular is not Knockout! :D
  
  – Jamie Rees
  Mar 8 at 11:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you define myvalue a function? obviously not try to assign value rather than passing as a param. you can use ng-class for this
  
  – Muhammad Farrukh Faizy
  Mar 8 at 11:41
  

  
  
  
  

add a comment | 

-3

I am trying something very simple but I keep getting an error:

Here is the code:

app.component.html

<div class="col-md-myvalue">stuff here</div>

app.component.ts

myvalue: string;


ngOnInit() 
 this.myvalue('6');

For some reason it's giving me this error:

Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.

What I'm I doing wrong here?

angular typescript angular7

share|improve this question

asked Mar 8 at 11:30

Paul B2001Paul B2001

43

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  You can't call a string, it's not a function. this.myvalue = '6';
  
  – ritaj
  Mar 8 at 11:31
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  you also should use [ngClass]='"
  
  – Yanis-git
  Mar 8 at 11:33
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Angular is not Knockout! :D
  
  – Jamie Rees
  Mar 8 at 11:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you define myvalue a function? obviously not try to assign value rather than passing as a param. you can use ng-class for this
  
  – Muhammad Farrukh Faizy
  Mar 8 at 11:41
  

  
  
  
  

add a comment | 

I am trying something very simple but I keep getting an error:

Here is the code:

app.component.html

<div class="col-md-myvalue">stuff here</div>

app.component.ts

myvalue: string;


ngOnInit() 
 this.myvalue('6');

For some reason it's giving me this error:

Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.

What I'm I doing wrong here?

angular typescript angular7

share|improve this question

asked Mar 8 at 11:30

Paul B2001Paul B2001

43

<div class="col-md-myvalue">stuff here</div>

myvalue: string;


ngOnInit() 
 this.myvalue('6');

angular typescript angular7

angular typescript angular7

share|improve this question

asked Mar 8 at 11:30

Paul B2001Paul B2001

43

share|improve this question

asked Mar 8 at 11:30

Paul B2001Paul B2001

43

asked Mar 8 at 11:30

Paul B2001Paul B2001

43

asked Mar 8 at 11:30

Paul B2001Paul B2001

43

3 Answers
3

active

oldest

votes

0

Try this,

app.component.html

<div [ngClass]="myvalue">...</div>

app.component.ts

myvalue: string;
ngOnInit() 
 this.myvalue = 'col-md-'+'6'; //concatenate your value as string here

If you want to pass data using with function, you can achieve it by using this approach,

myvalue: string;
ngOnInit() 
 this.setValue('6');


setValue(val: string)
 this.myvalue = 'col-md-'+val; //concatenate your value as string here

I also recommend you to read this documentation, https://angular.io/api/common/NgClass

share|improve this answer

edited Mar 11 at 7:40

answered Mar 8 at 11:39

shadowman_93shadowman_93

643314

add a comment | 

1

you have to assign value to string as this:

myvalue: string;


ngOnInit() 
 this.myvalue = 6;

share|improve this answer

answered Mar 8 at 11:34

Muhammad Abdullah ShafiqMuhammad Abdullah Shafiq

520114

add a comment | 

0

I wouldn't recommend @shadowman_93's solution. We have property binding for a reason. There's no reason to change CSS decorators in your component for this. It makes more sense to keep 'col-md' in your template, that way if you ever need to change it you will find it in an intuitive place, not in a string literal in your component. Thats just bad design.

Strings are not functions. You are setting your string as if you are calling a set function for it. Strings in Typescript work like strings in pretty much every other language, so

ngOnInit() 
 this.myvalue = '6';

share|improve this answer

answered Mar 8 at 18:29

TheBatmanTheBatman

1538

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I think the point is, he is trying to undestand how [ngClass] property and function call's are works. Sometimes you need to explore pros and cons or needs of your app by yourself. So I'm not pro consultant here, just trying to show anyone the way of doing someting. Methods/ways can be increased.
  
  – shadowman_93
  Mar 8 at 21:12
  
  

  
  
  
  

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
);



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55062343%2fangular-7-issue-with-passing-value-to-components-html%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Try this,

app.component.html

<div [ngClass]="myvalue">...</div>

app.component.ts

myvalue: string;
ngOnInit() 
 this.myvalue = 'col-md-'+'6'; //concatenate your value as string here

If you want to pass data using with function, you can achieve it by using this approach,

myvalue: string;
ngOnInit() 
 this.setValue('6');


setValue(val: string)
 this.myvalue = 'col-md-'+val; //concatenate your value as string here

I also recommend you to read this documentation, https://angular.io/api/common/NgClass

share|improve this answer

edited Mar 11 at 7:40

answered Mar 8 at 11:39

shadowman_93shadowman_93

643314

add a comment | 

0

Try this,

app.component.html

<div [ngClass]="myvalue">...</div>

app.component.ts

myvalue: string;
ngOnInit() 
 this.myvalue = 'col-md-'+'6'; //concatenate your value as string here

If you want to pass data using with function, you can achieve it by using this approach,

myvalue: string;
ngOnInit() 
 this.setValue('6');


setValue(val: string)
 this.myvalue = 'col-md-'+val; //concatenate your value as string here

I also recommend you to read this documentation, https://angular.io/api/common/NgClass

share|improve this answer

edited Mar 11 at 7:40

answered Mar 8 at 11:39

shadowman_93shadowman_93

643314

add a comment | 

Try this,

app.component.html

<div [ngClass]="myvalue">...</div>

app.component.ts

myvalue: string;
ngOnInit() 
 this.myvalue = 'col-md-'+'6'; //concatenate your value as string here

If you want to pass data using with function, you can achieve it by using this approach,

myvalue: string;
ngOnInit() 
 this.setValue('6');


setValue(val: string)
 this.myvalue = 'col-md-'+val; //concatenate your value as string here

I also recommend you to read this documentation, https://angular.io/api/common/NgClass

share|improve this answer

edited Mar 11 at 7:40

answered Mar 8 at 11:39

shadowman_93shadowman_93

643314

<div [ngClass]="myvalue">...</div>

myvalue: string;
ngOnInit() 
 this.myvalue = 'col-md-'+'6'; //concatenate your value as string here

myvalue: string;
ngOnInit() 
 this.setValue('6');


setValue(val: string)
 this.myvalue = 'col-md-'+val; //concatenate your value as string here

share|improve this answer

edited Mar 11 at 7:40

answered Mar 8 at 11:39

shadowman_93shadowman_93

643314

answered Mar 8 at 11:39

shadowman_93shadowman_93

643314

answered Mar 8 at 11:39

shadowman_93shadowman_93

643314

1

you have to assign value to string as this:

myvalue: string;


ngOnInit() 
 this.myvalue = 6;

share|improve this answer

answered Mar 8 at 11:34

Muhammad Abdullah ShafiqMuhammad Abdullah Shafiq

520114

add a comment | 

1

you have to assign value to string as this:

myvalue: string;


ngOnInit() 
 this.myvalue = 6;

share|improve this answer

answered Mar 8 at 11:34

Muhammad Abdullah ShafiqMuhammad Abdullah Shafiq

520114

add a comment | 

you have to assign value to string as this:

myvalue: string;


ngOnInit() 
 this.myvalue = 6;

share|improve this answer

answered Mar 8 at 11:34

Muhammad Abdullah ShafiqMuhammad Abdullah Shafiq

520114

myvalue: string;


ngOnInit() 
 this.myvalue = 6;

share|improve this answer

answered Mar 8 at 11:34

Muhammad Abdullah ShafiqMuhammad Abdullah Shafiq

520114

answered Mar 8 at 11:34

Muhammad Abdullah ShafiqMuhammad Abdullah Shafiq

520114

answered Mar 8 at 11:34

Muhammad Abdullah ShafiqMuhammad Abdullah Shafiq

520114

0

I wouldn't recommend @shadowman_93's solution. We have property binding for a reason. There's no reason to change CSS decorators in your component for this. It makes more sense to keep 'col-md' in your template, that way if you ever need to change it you will find it in an intuitive place, not in a string literal in your component. Thats just bad design.

Strings are not functions. You are setting your string as if you are calling a set function for it. Strings in Typescript work like strings in pretty much every other language, so

ngOnInit() 
 this.myvalue = '6';

share|improve this answer

answered Mar 8 at 18:29

TheBatmanTheBatman

1538

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I think the point is, he is trying to undestand how [ngClass] property and function call's are works. Sometimes you need to explore pros and cons or needs of your app by yourself. So I'm not pro consultant here, just trying to show anyone the way of doing someting. Methods/ways can be increased.
  
  – shadowman_93
  Mar 8 at 21:12
  
  

  
  
  
  

add a comment | 

0

I wouldn't recommend @shadowman_93's solution. We have property binding for a reason. There's no reason to change CSS decorators in your component for this. It makes more sense to keep 'col-md' in your template, that way if you ever need to change it you will find it in an intuitive place, not in a string literal in your component. Thats just bad design.

Strings are not functions. You are setting your string as if you are calling a set function for it. Strings in Typescript work like strings in pretty much every other language, so

ngOnInit() 
 this.myvalue = '6';

share|improve this answer

answered Mar 8 at 18:29

TheBatmanTheBatman

1538

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I think the point is, he is trying to undestand how [ngClass] property and function call's are works. Sometimes you need to explore pros and cons or needs of your app by yourself. So I'm not pro consultant here, just trying to show anyone the way of doing someting. Methods/ways can be increased.
  
  – shadowman_93
  Mar 8 at 21:12
  
  

  
  
  
  

add a comment | 

I wouldn't recommend @shadowman_93's solution. We have property binding for a reason. There's no reason to change CSS decorators in your component for this. It makes more sense to keep 'col-md' in your template, that way if you ever need to change it you will find it in an intuitive place, not in a string literal in your component. Thats just bad design.

Strings are not functions. You are setting your string as if you are calling a set function for it. Strings in Typescript work like strings in pretty much every other language, so

ngOnInit() 
 this.myvalue = '6';

share|improve this answer

answered Mar 8 at 18:29

TheBatmanTheBatman

1538

ngOnInit() 
 this.myvalue = '6';

share|improve this answer

answered Mar 8 at 18:29

TheBatmanTheBatman

1538

answered Mar 8 at 18:29

TheBatmanTheBatman

1538

answered Mar 8 at 18:29

TheBatmanTheBatman

1538