Issue with Color Attribute in Heading within an Ionic Content Element

The color attribute doesn't seem to be working in Ionic 2. It works fine with normal Ionic tags, but not with HTML tags. Can someone help me with this? The code is provided below.

<ion-content>
<div class="page-home">
<h1 color="secondary">LOGO</h1>
<br/>
<br/>
<p color="danger">Sign in with social media account</p>
<div id="socialLogin">
  <img src="assets/icon/fb.svg" />
  <img src="assets/icon/tw.svg" />
  <img src="assets/icon/goo.svg" />
</div>
<ion-list>
  <ion-item>
    <ion-label floating color="secondary">Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>
</ion-list>
<br/>
<br/>
<button ion-button full icon-left> <ion-icon name="log-in"></ion-icon>Login</button>

<button ion-button clear>Register</button>
<button ion-button clear>Forgot Password</button>
  </div>

</ion-content>
htmlcssionic-frameworkionic2

Answer №1

To achieve the desired color effect, simply use the ion-text directive on your element and then apply the color of your choice.

For example, in your particular situation, you can implement it as follows:

<h1 ion-text color="blue">HEADER</h1>
<!-- followed by -->
<p ion-text color="red">Important message here</p>

Answer №2

The color properties for ionic components are specified as @Inputs, which means they can only be used with Ionic components. For examples, refer to the Ionic documentation: https://ionicframework.com/docs/api/components/button/Button/#input-properties

For standard HTML elements, you should use 

[style.color]="regular css color / name or hash"
.

If you wish to utilize the "secondary" color, it must be defined in your component.ts file.

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

Modify the border in jQuery if a specific div exists within a list item

Here is a collection of items: <div class="wine"> <H1>Title</H1> <div class="promotion"></div></div> <div class="wine"> <H1>Title</H1> </div></div> <div class="wine"> <H1>Title& ...

javascriptjqueryhtmlcss

Transform Default Buttons to Resemble Normal Buttons

I currently have a JavaFX button that is set as the Default Button, allowing users to select it with the Enter key. The button has a blue background: https://i.sstatic.net/SYvIj.png However, I would like to change its appearance to that of a normal butto ...

cssbuttonjavafxjavafx-8

Unusual Quirk in HTML

I'm having a simple issue that I need help with... Does anyone know how to make the image fill the empty space on the right side of the text? Take a look at this screenshot for reference: Here is the HTML file: And here is the CSS file: dl.drop ...

htmlcss

Display a button only when hovering over it

Seeking assistance for a simple task that is eluding me at the moment. I am currently using scss and trying to make a button only appear when hovered over. The button is hidden in the code snippet below, nested within a block alongside some svgs. Any hel ...

javascripthtmlangularsass

The name 'SafeUrl' cannot be located

I'm working on resolving the unsafe warning in the console by using the bypassSecurityTrustUrl method, but unfortunately, I keep encountering an error. user.component.ts import {Component,OnInit} from '@angular/core'; import { DomSanitizer ...

javascripthtmlangularionic2

How to bypass validation for required input in jQuery validate plugin

As an example, consider the <input name="surname" id="surname" type="text">. Sometimes I want to hide this input and make it non-required. My current workaround is to set a value such as "some value" when hiding the input, and then remove this value ...

javascriptjqueryhtmljquery-validate

Conceal the Material UI Grid element and allow the following Grid Item to smoothly transition into its place

I need to create a form where certain Textfields must be hidden. However, when I attempt to hide a Grid item within a Grid container using display: none, the next grid item does not move to take its place. Instead, it creates whitespace. Is there a soluti ...

cssreactjsmaterial-ui

Joining Two Texts in HTML with a Link Embedded within

Within my HTML code, I have two specific strings: "Forgotten your password?" and "Please" 'HPERLINK' "to change your password". To manage these strings efficiently in different languages, I utilize a messageBundle file to store constants. This f ...

javascripthtmlstring

The select element is displaying with a different width compared to its sibling, causing the Bootstrap spacing to over

Working on styling an input form using Bootstrap-4. I have an input field and a select field, both having the class "col" with different spacing classes. However, the select field appears slightly smaller. When I assign the class "col-6" to both fields, t ...

htmlcsstwitter-bootstrapbootstrap-4

Update the text content in the specific span element when the class attribute matches the selected option in the

How can I dynamically update text inside a span based on matching classes and attributes without hardcoding them all? An ideal solution would involve a JavaScript function that searches for matches between span classes and select field options, updating t ...

javascriptjqueryhtmldrop-down-menu

When clicking on the side-bar, it does not respond as expected

My website has a menu layout that features a logo on the left and an icon for the menu on the right side. When the icon is clicked, the menu slides in from the right side of the window, and when clicked again, it slides out. However, I am facing two issues ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What are some ways to customize the player for Youtube videos?

I'm looking to recreate the design of Youtube videos on my website when I embed them. The image below is just an example, but it reflects the simplicity I am aiming for. Any guidance or examples would be greatly appreciated, as I am unsure where to be ...

phphtmlcssyoutube

What could be the reason for my Bootstrap collapse navigation bar not functioning properly?

<!DOCTYPE html> <html lang="en"> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> ...

htmlcsstwitter-bootstrap

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code. I have the tree structure and a recursive function that adds all the tree elements ...

javascripthtmlcss

Ways to eliminate the navigation button on an HTML5 video player

I'm having a great experience using the HTML5 video player to continuously play videos. However, I have noticed that when my mouse cursor hovers over the video, a navigation button appears at the end of the screen. I would like to either remove or hid ...

csshtmlvideo

Implementing a loop with jQuery in a React application

I encountered an error stating that the i is not defined, even though I have already initialized the npm install jQuery and imported it. Here is a screenshot of the error: https://i.sstatic.net/SV8Ww.png This is my code snippet: isClick ...

jqueryhtmlreactjsloopsnpm

Discrepancy detected in AGM Map printout

When attempting to print my Angular AGM Map from Chrome, I noticed a large grey gap in the map. This gap is visible even when "background graphics" are turned off and it causes the map image below it to shift downwards. If you want to reproduce this issue ...

cssangulargoogle-maps-api-3printingangular-google-maps

Text Description: "Important Information Hidden Beneath Persistent Bar"

I have a website with a sticky header (position: fixed), and despite adding extra padding to the body, the main content Header and part of the paragraph are still hidden behind the fixed header. This issue only occurs on the homepage and on screens smaller ...

htmlcssheadersticky

Specify padding or margin for all sides in a single line of XML code

Is there a way to set the padding or margin for all four sides in xml with just one line, similar to how we can do it in css? For instance, in css: padding: 1px 2px 3px 4px; Is there an equivalent method in xml for accomplishing this? ...

androidcssxml

Is there a way to make jQuery Validate display errors within the form elements rather than outside of them?

Given the jQuery Validate basic example provided in the link below, what method can be used to display error messages within form elements whenever feasible (excluding checkboxes)? http://docs.jquery.com/Plugins/validation#source ...

jquerycssjquery-validate