Styjun

Non-aqueous eyes?

Is it expected that a reader will skip parts of what you write?

How to hide an urban landmark?

You have (3^2 + 2^3 + 2^2) Guesses Left. Figure out the Last one

貧しい【まずしい】 poor 貧乏【びんぼう】な poor What's the difference?

How come the nude protesters were not arrested?

How to communicate to my GM that not being allowed to use stealth isn't fun for me?

Has there been a multiethnic Star Trek character?

How does the Around command at zero work?

What ways have you found to get edits from non-LaTeX users?

What is the color of artificial intelligence?

Is White controlling this game?

Check if three arrays contains the same element

How to handle (one's own) self-harm scars (on the arm), in a work environment?

Why are trash cans referred to as "zafacón" in Puerto Rico?

Writing an augmented sixth chord on the flattened supertonic

Why does the Mishnah use the terms poor person and homeowner when discussing carrying on Shabbat?

Is it safe to change the harddrive power feature so that it never turns off?

Is it possible to fly backward if you have 'really strong' headwind?

Fermat's statement about the ancients: How serious was he?

Teaching a class likely meant to inflate the GPA of student athletes

Warning about needing "authorization" when booking ticket

Bb13b9 confusion

A map of non-pathological topology?

Angular 4 - Toggle Switch to detect status

Angular HTML bindingHow to detect a route change in Angular?Angular EXCEPTION: No provider for HttpAngular - Set headers for every requestTriggering change detection manually in AngularWhat is the equivalent of ngShow and ngHide in Angular 2+?Angular/RxJs When should I unsubscribe from `Subscription`How to detect when an @Input() value changes in Angular?Huge number of files generated for every Angular projectAngular 2: Bootstrap Switch not changing value of variable

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

1

I am using the library toggle-switch:
Toogle Switch

This my switch element:

<label class="switch-light switch-material">
 <input type="checkbox">
 <strong class="large-4 columns float-left">
 Off
 </strong>
 <span class="large-4 columns float-left">
 <span>Off</span>
 <span>On</span>
 <a (click)="detectStatus(true or false)"></a>
 </span>
 <strong class="large-4 columns float-left">
 On
 </strong>
</label>

Using the function detectStatus(), I want to send as parameter value false if the status is Off and true if the status is On.

How could do it? thanks,

angular

share|improve this question

asked Nov 10 '17 at 10:56

EladerezadorEladerezador

46221325

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  use [ngModel] and [ngChecked]
  
  – Saurabh Agrawal
  Nov 10 '17 at 10:59
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, simply passing a boolean and works, this.isOn = !this.isOn;
  
  – Eladerezador
  Nov 10 '17 at 11:44
  

  
  
  
  

add a comment | 

1

1

I am using the library toggle-switch:
Toogle Switch

This my switch element:

<label class="switch-light switch-material">
 <input type="checkbox">
 <strong class="large-4 columns float-left">
 Off
 </strong>
 <span class="large-4 columns float-left">
 <span>Off</span>
 <span>On</span>
 <a (click)="detectStatus(true or false)"></a>
 </span>
 <strong class="large-4 columns float-left">
 On
 </strong>
</label>

Using the function detectStatus(), I want to send as parameter value false if the status is Off and true if the status is On.

How could do it? thanks,

angular

share|improve this question

asked Nov 10 '17 at 10:56

EladerezadorEladerezador

46221325

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  use [ngModel] and [ngChecked]
  
  – Saurabh Agrawal
  Nov 10 '17 at 10:59
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, simply passing a boolean and works, this.isOn = !this.isOn;
  
  – Eladerezador
  Nov 10 '17 at 11:44
  

  
  
  
  

add a comment | 

I am using the library toggle-switch:
Toogle Switch

This my switch element:

<label class="switch-light switch-material">
 <input type="checkbox">
 <strong class="large-4 columns float-left">
 Off
 </strong>
 <span class="large-4 columns float-left">
 <span>Off</span>
 <span>On</span>
 <a (click)="detectStatus(true or false)"></a>
 </span>
 <strong class="large-4 columns float-left">
 On
 </strong>
</label>

Using the function detectStatus(), I want to send as parameter value false if the status is Off and true if the status is On.

How could do it? thanks,

angular

share|improve this question

asked Nov 10 '17 at 10:56

EladerezadorEladerezador

46221325

<label class="switch-light switch-material">
 <input type="checkbox">
 <strong class="large-4 columns float-left">
 Off
 </strong>
 <span class="large-4 columns float-left">
 <span>Off</span>
 <span>On</span>
 <a (click)="detectStatus(true or false)"></a>
 </span>
 <strong class="large-4 columns float-left">
 On
 </strong>
</label>

angular

angular

share|improve this question

asked Nov 10 '17 at 10:56

EladerezadorEladerezador

46221325

share|improve this question

asked Nov 10 '17 at 10:56

EladerezadorEladerezador

46221325

asked Nov 10 '17 at 10:56

EladerezadorEladerezador

46221325

asked Nov 10 '17 at 10:56

EladerezadorEladerezador

46221325

1 Answer
1

active

oldest

votes

1

You should use ngModel and checked in input to achieve this

Try this

<input [ngModel]="test" [checked]="test" type="checkbox" (change) = "checkClicked(test)">

In Component:

 checkClicked(val)
 this.test = !val; 
 

Here is the working plnkr

share|improve this answer

edited Mar 24 at 18:53

Narshe

5611

answered Nov 10 '17 at 11:33

Saurabh AgrawalSaurabh Agrawal

4,48421131

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is better your solution, thanks,
  
  – Eladerezador
  Nov 10 '17 at 12:07
  

  
  
  
  

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%2f47221187%2fangular-4-toggle-switch-to-detect-status%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

You should use ngModel and checked in input to achieve this

Try this

<input [ngModel]="test" [checked]="test" type="checkbox" (change) = "checkClicked(test)">

In Component:

 checkClicked(val)
 this.test = !val; 
 

Here is the working plnkr

share|improve this answer

edited Mar 24 at 18:53

Narshe

5611

answered Nov 10 '17 at 11:33

Saurabh AgrawalSaurabh Agrawal

4,48421131

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is better your solution, thanks,
  
  – Eladerezador
  Nov 10 '17 at 12:07
  

  
  
  
  

add a comment | 

1

You should use ngModel and checked in input to achieve this

Try this

<input [ngModel]="test" [checked]="test" type="checkbox" (change) = "checkClicked(test)">

In Component:

 checkClicked(val)
 this.test = !val; 
 

Here is the working plnkr

share|improve this answer

edited Mar 24 at 18:53

Narshe

5611

answered Nov 10 '17 at 11:33

Saurabh AgrawalSaurabh Agrawal

4,48421131

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is better your solution, thanks,
  
  – Eladerezador
  Nov 10 '17 at 12:07
  

  
  
  
  

add a comment | 

You should use ngModel and checked in input to achieve this

Try this

<input [ngModel]="test" [checked]="test" type="checkbox" (change) = "checkClicked(test)">

In Component:

 checkClicked(val)
 this.test = !val; 
 

Here is the working plnkr

share|improve this answer

edited Mar 24 at 18:53

Narshe

5611

answered Nov 10 '17 at 11:33

Saurabh AgrawalSaurabh Agrawal

4,48421131

<input [ngModel]="test" [checked]="test" type="checkbox" (change) = "checkClicked(test)">

 checkClicked(val)
 this.test = !val; 
 

share|improve this answer

edited Mar 24 at 18:53

Narshe

5611

answered Nov 10 '17 at 11:33

Saurabh AgrawalSaurabh Agrawal

4,48421131

edited Mar 24 at 18:53

Narshe

5611

edited Mar 24 at 18:53

Narshe

5611

answered Nov 10 '17 at 11:33

Saurabh AgrawalSaurabh Agrawal

4,48421131

answered Nov 10 '17 at 11:33

Saurabh AgrawalSaurabh Agrawal

4,48421131