CSS functions not working inside angular component

Question

Hi all I am developing angular application in which if i use same HTML code inside index.html file its working as expected but if i use same HTML code inside app.component.html file i am not getting desired result.

Expected Result

Getting Result

if I use below code it's not working.

<body id="top-page">
  <app-root></app-root>
</body>

but if i use HTML code inside body tag directly its working fine. Please help me find the solution.

Please, give more information about css styles on the page and 'app-root' component template. — MaxXx1313, Nov 29 '21 at 15:23
I'm not changing any css in app component template same css as in index.html file css code is very long which I cannot include here — chethan, Nov 29 '21 at 15:29
You can try to add `:host { display:block }` in 'app-root' component styles, but that's a blind attempt =) — MaxXx1313, Nov 29 '21 at 15:35
Are 'easy payment' and 'first delivery' present on the page? — MaxXx1313, Nov 29 '21 at 15:37
Actually I have multiple css files included in index.html file and only some css code are not working — chethan, Nov 29 '21 at 15:37
You can try to check if css files are loaded correctly in network tool. — MaxXx1313, Nov 29 '21 at 15:39
@MaxXx1313yes 'easy payment' and 'first delivery' present on same page — chethan, Nov 29 '21 at 15:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/239672/discussion-between-maxxx1313-and-chethan). — MaxXx1313, Nov 29 '21 at 15:39

score 1 · Answer 1 · edited Nov 30 '21 at 06:35

1

Have you included your CSS file path in the index.html? There might be a similar question here: CSS is not working in my angular component

edited Nov 30 '21 at 06:35

Chiara Ani

918
7
25

answered Nov 29 '21 at 15:34

Lars

97
7

Yes I had included css file path in index.html actually only some css functions not working – chethan Nov 29 '21 at 15:36

CSS functions not working inside angular component

1 Answers1