How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view

<ion-content>
  <ion-segment #viewController (ionChange)="changeViewState($event)">
      <ion-segment-button value="map">
        <ion-label>Map</ion-label>
      </ion-segment-button>
      <ion-segment-button value="list">
        <ion-label>List</ion-label>
      </ion-segment-button>
    </ion-segment>
  <app-list-base *ngIf="viewValue == 'list'" [config]="config" [template]="itemTemplate"></app-list-base>
  <app-map *ngIf="viewValue == 'map'" [config]="config"></app-map>
</ion-content>

Currently, I am using the ionChange event to determine the viewValue. However, as I only need the raw value from the control, I am exploring if there is a simpler way to achieve this using HTML alone.

For example:

<app-list-base *ngIf="#viewController.val == 'list'" [config]="config" [template]="itemTemplate"></app-list-base>

Is there a way to access the viewController value through HTML?

javascripthtmlangulartypescriptionic4

Answer №1

When it comes to *ngIf="viewController.value", it's important to note that the Angular way is to use [(ngModel)] or even ReactiveForms instead of including the # symbol.

<ion-segment [(ngModel)]="myvariable">
...
<ion-segment>
<app-list-base *ngIf="myvariable">

In this code snippet, "myvariable" represents a variable in your .ts file.

It's worth mentioning that Ionic Framework now has official integration with Angular, allowing you to leverage all your knowledge about Angular. While Ionic does have its own characteristics, the basic model-view concept remains consistent.

Furthermore, it's my opinion that all the examples provided in the documentation could benefit from a thorough review for accuracy and clarity.

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

It is essential for each child in a list to be assigned a unique "key" prop to ensure proper rendering, even after the key has been assigned (in Next

Working with Next JS and implementing a sidebar with custom accordions (created as SideAccord.js component). Data is being looped through an array with assigned keys, but still encountering the following error: Warning: Each child in a list should have a u ...

javascriptreactjsnext.jsjsxstyled-components

How to organize initial, exit, and layout animations in Framer Motion (React) tutorial?

Currently, I am utilizing framer-motion library for animating a change in grid columns. This is the objective: Within the grid container (#db-wrapper), there are nine buttons arranged. https://i.stack.imgur.com/61pQqm.png When the user switches to the ...

javascriptreactjsanimationframer-motion

What could be causing req.body to consistently come back as an empty object?

I am struggling with req.body always returning an empty object regardless of what I try. I have experimented with: var jsonParser = bodyParser.json(); and then including jsonParser in the function -> app.post('/api/get-last-project',jsonParser ...

javascriptnode.jsexpressbody-parser

The argument provided is of type 'string | null' which cannot be assigned to a parameter expecting only 'string' type. The value of 'null' is not compatible with the type 'string' in Angular 12

When trying to parse the stored session data using JSON.parse(sessionStorage.getItem('owner')), we may encounter an error stating: Argument of type 'string | null' is not assignable to parameter of type 'string'. This is becau ...

angulartypescriptangular12typescript4.0

Angular 2 - Component Loading Screen

I'm looking for a solution for my loading component that shows a spinner and retrieves a remote configuration file necessary for the app to work. Is there a way to have all routes pass through the loading component first to ensure the config data is l ...

angular

Is it necessary to include the Fonts file (which accompanies Bootstrap files) in the HTML document?

As a beginner in HTML, I decided to incorporate Bootstrap into my project. After downloading the necessary files, including css, js, and fonts, I found myself able to easily add the css and js files using the appropriate tags. However, I encountered some c ...

htmlcssbootstrap-4

From HTML to Mat Table: Transforming tables for Angular

I am currently facing a challenge with my HTML table, as it is being populated row by row from local storage using a for loop. I am seeking assistance in converting this into an Angular Material table. Despite trying various suggestions and codes recommend ...

javascriptangularangular-material

Unable to present information retrieved from REST API, despite data being provided by the server

I'm attempting to make a REST call using a token in the header to retrieve information. To include the required header token, my code is structured as follows within my restClient.js, app.js, and users.js files. //restClient.js import { jsonServerR ...

javascriptreactjsadmin-on-rest

In order to launch an Angular project

Currently, I am in the process of creating a VSS web extension using Angular... To generate a .vsix file, I need to reference an HTML file. The challenge arises when working with Angular because we typically use ng serve which loads our page at http://lo ...

angularazure-devops

Typescript - The type is lacking certain properties from another type, despite having all options defined

I have defined the following TypeScript declarations: type TDisplayKey = "a" | "b" | "c"; const DISPLAY_KEYS: Record<string, TDisplayKey> = { A: "a", B: "b", C: "c" }; const DISPLAY_KEY_TITLES: Record<TDisplayKey, string> = { [DISPLA ...

typescript

Console.log is not visible to jQuery's getJSON function

Currently, I am utilizing the getJSON method as shown below: $.getJSON("js/production-data.json").done(function(response) { console.log(response); console.log('hello'); }); While monitoring Firebug, the data retrieval process seems to ...

javascriptjqueryjsongetjson

Remove any errors as soon as the input field becomes valid

My current setup involves AngularJS with node.js. To handle errors, I have devised the following strategy: node router effect.js: router.post('/', function(req, res, next){ req.checkBody('name', 'Eff ...

javascripthtmlangularjsnode.js

The image fails to appear

Check out my website at www.wostokhr.pl I am having trouble getting the picture "pics/hero.jpg" to show up in the "div id="hero"" section with a JS parallax function. I have double-checked the HTML and CSS validators and everything seems to be correct. An ...

htmlcss

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

I created a project using .net core MVC. I have integrated the semantic-ui-react modal by importing its library and linking the CSS for it to function properly. However, I encountered an issue where the bootstrap CSS was conflicting with the CDN for semant ...

htmlcsstwitter-bootstrapreactjs

What is the best way to prevent a directory from being included in the Webpack bundle?

Issue: Despite configuring my Webpack settings in webpack.config.js to exclude files from the ./src/Portfolio directory, all files are being bundled by Webpack. Code Snippet: Webpack.config.js const path = require('path'); module.exports = { ...

javascriptnpmwebpack

Using regular expressions in JavaScript, eliminate all characters preceding a specified final character

I am attempting to eliminate all text that precedes the last character in a Regex pattern. For example: rom.com/run/login.php Would turn into: login.php Can someone guide me on how to achieve this using JavaScript? I have limited experience with regul ...

javascriptnode.jsregexnpmsubstring

Creating a Dynamic List in JQuery Fancy Box for an iframe

I am new to using JQuery and I have a table with a checkbox. When the checkbox is clicked, I want a dynamic list to appear in a pop-up window. I've been having trouble implementing this. <html> <head> <label align="center">Select a ...

jqueryhtmljquery-uifancybox

Assign a unique value to every line in a JSON string within the Vue.js hierarchy of components

I created a Vue component that initializes an empty list and an object like this: data: function(){ return { list: [], newThing: { body: '', }, }; }, The list is then populated with JSON data fetched ...

javascriptarraysjsonobjectvue.js

React not showing multiple polylines on the screen

I'm currently working on an application aimed at practicing drawing Kanji characters. To draw the lines, I'm utilizing svg. The issue I've encountered is that when I try to draw multiple separate lines using a 2D array of points for each lin ...

javascriptreactjssvg

Uncovering the User's Browser Specifically for UC-Mini and Opera-Mini

I'm in need of a script that can identify if the user's browser is uc-mini or opera-mini. These particular browsers do not support the "transition" feature. Therefore, when this specific browser is detected, I would like to deactivate the "trans ...

javascriptjquery