Switch the MatSlideToggle within an Angular 8 component

I seem to be encountering a persistent error:

"ERROR TypeError: Cannot set property 'checked' of undefined"

Take a look at my code snippet from test.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSlideToggle } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  @ViewChild('testSlider', { static: false }) t: MatSlideToggle;

  constructor() { }

  ngOnInit() {
    this.t.checked = true;
  }

}

Additionally, here's the relevant part from test.component.html

<mat-slide-toggle #testSlider>Test</mat-slide-toggle>

I can't quite figure out what I'm missing here. Any insights would be greatly appreciated!

Answer №1

When attempting to access your @ViewChild on ngOnInit, you may find that it is not yet defined. To resolve this issue, consider implementing the following approach:

import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSlideToggle } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements AfterViewInit {

  @ViewChild('testSlider', { static: false }) t: MatSlideToggle;

  constructor(private changeDetectorRef:ChangeDetectorRef) { }

  ngAfterViewInit() {
    this.t.checked = true;
    this.changeDetectorRef.detectChanges();
  }

}

Answer №2

If you find yourself not needing to reference the MatSlideToggle in your component, consider utilizing the Input-Property of the MatSlideToggle-Directive directly. (https://material.angular.io/components/slide-toggle/api).

example.component.html

<mat-slide-toggle [checked]="toggleChecked">Example</mat-slide-toggle>

example.component.ts

export class ExampleComponent { 
  toggleChecked = true;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm looking to send a response with data using Nest JS API and Postman. How can I accomplish this

As I work on setting up my server using Nest Js, I encountered an issue while trying to fetch data from Postman to test the API urls. Unfortunately, I keep receiving empty responses from the server or undefined values from the postman request. Below is a s ...

Add a npm module without type definitions

I am currently utilizing Typescript version 2.1 and facing an issue with installing an npm package called 'reactable' that lacks typings. When attempting to import the package using import * as Reactable from 'reactable', Typescript di ...

Error encountered in Node.js OpenAI wrapper: BadRequestError (400) - The uploaded image must be in PNG format and cannot exceed 4 MB

Attempting to utilize the OpenAI Dall-e 2 to modify one of my images using the official Nodejs SDK. However, encountering an issue: This is the snippet of code: const image = fs.createReadStream(`./dist/lab/${interaction.user.id}.png`) const mask = fs.c ...

Acquire information using AngularJS

This is a demonstration of my service: import { Injectable } from '@angular/core'; import { GenericPostService } from 'app/shared/services/generic.post.service'; @Injectable({ providedIn: 'root' }) export class FaqServic ...

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

The issue appears to be trapped in a loop: package.json is missing type: "module". This results in an error when trying to use modules in TypeScript files: An error occurred while running the seed command: /Users/me/code/me/prisma-learning/grap ...

`Is there a way to assign multiple parameters to HttpParams within Angular 5?`

I'm attempting to send multiple parameters to HttpParams in Angular 5 using the approach below: paramsObject: any params = new HttpParams(); for (let key in paramsObject) { params.set(key, paramsObj ...

The dropdown will close automatically when the user clicks outside of it

My dropdown setup requires it to close when the user clicks outside of it. <div [class.open]="qtydropdownOpened"> <button (click)="qtydropdownOpened = !qtydropdownOpened" type="button" data-toggle="dropdown" aria-haspopup="true" [att ...

Extending Interfaces Using Keys from an Array in Typescript

When dealing with a scenario where you want a pointfree omit, you can achieve this: type PlainObject<T> = {[key: string]: T} const omit = <K extends string>( name: K ) => <T, U extends PlainObject<T> & { [P in K]: T }>( ...

Error message in Angular 6: Unable to bind to 'org' as it is not recognized as a valid property of 'appCycleDirection' (Directive)

Here is the code snippet of a directive I have created: import { Directive, Input, OnInit } from '@angular/core'; import {GoogleMapsAPIWrapper} from '@agm/core'; declare let google: any; @Directive({ // tslint:disable-next-line:dire ...

Customize Material-UI Icons styles in React app

I'm working on a React.js app with Typescript and I need to remove the default visited Material Icons coloring from an anchor tag. Here's the stylesheet I tried: const useStyles = makeStyles((theme: Theme) => createStyles( myAnchor: ...

React Typescript does not support the use of React-Router

I'm currently working on a React app that utilizes Typescript. The React version is set to "react": "^16.9.0", and the React-Router version is "react-router-dom": "^5.1.2". Within my App.tsx file, the structure looks like this: const App: React.FC ...

Include a new module in the declarations NgModule utilizing ts-morph

Currently, I am utilizing the ts-morph library and my objective is to add a new component to the declarations: This is my initial setup: @NgModule({ declarations: [], imports: [], providers: [], }) Here is what I am aiming for: @NgModule({ declarations: [ ...

Save information for each session with a set expiration time

Currently, I am working on a mobile application using Angular (specifically Ionic 5) and I am in need of a solution to maintain session data for my users throughout their workflow. Initially, I thought about utilizing the sessionStorage feature for this p ...

What is the process for applying this specific style to a certain element?

Here is an example of an element in an Angular2 app: <div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}"> I would like to enhance the style b ...

Tips for enhancing a TypeScript interface for a React component in (Material-UI) by utilizing styled-components

I've been struggling to find a solution for this overload issue with no luck so far. My stack includes Typescript, Styled-components, and Material-UI. I am utilizing styled(MUIButton) to extend the default Button from MUI. While my props are being pas ...

Traversing fields of a document within a Firestore collection using Angular

Attempts to retrieve the user's photoUrl based on their ID have been unsuccessful. Here is a snapshot of my firestore collection, can someone please guide me on how to access the photoUrl? https://i.stack.imgur.com/p2Zvm.jpg The main collection is &ap ...

Is there a way for me to indicate to my custom component the specific location within an input message where a value should be displayed

I'm currently developing a value selector component in ionic/angular and I've encountered an issue with the message/title that I want to pass to the component. I want to be able to specify where the selected value should appear within the message ...

Clicking a button in React requires two clicks to update a boolean state by triggering the onClick event

I have a React functional component with input fields, a button, and a tooltip. The tooltip is initially disabled and should only be enabled and visible when the button is clicked and the input fields contain invalid values. The issue I'm facing is t ...

How can errors be captured when working with chained rxjs observables in an combineLatest scenario?

After reading through this thread, I encountered the following scenario: Observable.combineLatest( this.translate.get("key1"), this.translate.get(""), this.translate.get("key3"), this.translate.get("key4") ) .subscr ...

Issue with method assignment in extending Array class in Typescript

Currently, I am utilizing Typescript and Vue in my workflow, although the specific framework is not a major concern for me. I have been attempting to expand Array functionality in the following manner: class AudioArray extends Array<[number, number]&g ...