Unable to use CSS class binding in Angular version 7

Question

I'm following this Angular 7 tutorial. But my class bindings throws exception:

I created the CSS class as

.test-regular
{
color:purple;
font-family: 'Courier New', Courier, monospace
}

and in the customer-component.component.ts file I created a property

 public regularClass="test-regular";

and in the html template I'm using it as

 <h2 [class]="regularClass">Hiya Everyone</h2>

This is how it's suggested in the tutorial. Am I missing anything?

The error tells you that the problem is with a p tag. Post the template. Or even better, post a stackblitz reproducing the problem. Apparently, you've put the
inside a
, which is invalid HTML. — JB Nizet, Dec 25 '18 at 13:42
Yes I understand. Since I was nesting
tags, the exception was thrown as nesting of
is not allowed. — Raida Adn, Dec 25 '18 at 13:54
@ShadabFaiz no, it isn't. https://stackoverflow.com/questions/12015804/nesting-p-wont-work-while-nesting-div-will — JB Nizet, Dec 25 '18 at 14:04
@RaidaAdn nested p tags works on normal html. I believe however i doesn't work in angular. you can try it on by creating a normal html page or on W3School — Shadab Faiz, Dec 25 '18 at 14:10
You've already asked that question, and I already answered. You're free to not use Stackoverflow if you don't like its rules. Instead of complaining, try to make your question better, to read error messages, to provide the relevant information. — JB Nizet, Dec 25 '18 at 14:10

score 0 · Answer 1 · edited Dec 25 '18 at 14:38

Since I used <h2> inside <p> which is not correct since The tags are logical tags which are used specifically to convey section headings.I got the error.

Even nesting of <p> is also not allowed. Since <p> are block level element and it cannot contain itself. Hence I updated my html as follows.

<p>  
<input [id]="divid" type="text" value="Cajole"/><br>
<input id="{{divid}}" type="text" value="Cajole"/><br>
<input [disabled]="isdisabled" type=text value="Cajole"/><br> 
</p>
<div [class]="regularClass">Hiya Everyone</div>

Hope this helps to anyone with no css knowledge.

Unable to use CSS class binding in Angular version 7

inside a

1 Answers1