loading html content successfully but css style is not applied in angular2?

Question

I am using angular2 to load a external html into the component, the html content is successfully loaded into the component but css style in the html file is not applied yet.

Here is my component

@Component({
  selector: 'faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.css']
})
export class TestComponent implements OnInit {

  constructor(
              private http:Http) { }

  template;

  ngOnInit() {
    var self = this;
    var href = "/assets/faq.html";
    this.http.get('./assets/test.html')
               .map(res =>res.text())
               .subscribe(
                     (res: any) =>{
                   this.template = res;
               });
  }
}

scss file

.accordion-item a {
    font-family: 'Montserrat' !important;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    padding: 1rem 4.5rem 1rem 1rem;
    color: #373c46;
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
}

.accordion-item a.active {
    color: #4747d1;
    /* border-bottom: 1px solid #4747d1; */
}

.accordion-item .content {
    //display: none;
    padding: 1rem;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    color: #868692;
}

faq.html

<div class="container">
          <div class="f-intro accordion-section">
            <div class="col-md-10 col-md-offset-1">
              <h1 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">FAQ</h1>
              <div class="accordion">
            <div [innerHTML]="template" class="accordion"> </div>
          </div>
        </div>
</div>

external html

  <div class="accordion-item">
    <a class=""> I read this section, but i still have questions.. </a>
    <div class="content" >
      <p id="txt_lib-rep-bod">We invite you to our Slack chat (link in main menu). We cant be there 24/7 but we will respond your question there ASAP! </p>
    </div>
  </div>

try adding /deep/ before your each CSS rule..

Pankaj Parkar
– Pankaj Parkar

2018-01-14 10:02:33 +00:00
Commented Jan 14, 2018 at 10:02 — Pankaj Parkar
– Pankaj Parkar, Commented Jan 14, 2018 at 10:02
thanks, it works, can you add it as a answer?

user824624
– user824624

2018-01-14 10:18:12 +00:00
Commented Jan 14, 2018 at 10:18 — user824624
– user824624, Commented Jan 14, 2018 at 10:18
Yes, I did, Thanks :)

Pankaj Parkar
– Pankaj Parkar

2018-01-14 11:32:14 +00:00
Commented Jan 14, 2018 at 11:32 — Pankaj Parkar
– Pankaj Parkar, Commented Jan 14, 2018 at 11:32

Pankaj Parkar · Accepted Answer · 2018-01-14 11:26:25Z

1

Since you used Emulated ViewEncapsulation(default) option which adds extra unique attribute to component style and DOM elements. So when you want to apply some styling on specific element that resides in current component HTML or its descendant tree. Then you could use /deep/ before CSS style Rule.

But sooner /deep/, >>> and ::ng-deep option gonna drop. Angular team recommend to use ::ng-deep so use that instead.

::ng-deep .accordion-item a {
    /*CSS Rule as is*/
}

::ng-deep .accordion-item a.active {
    /*CSS Rule as is*/
}

::ng-deep .accordion-item .content {
    /*CSS Rule as is*/
}

answered Jan 14, 2018 at 11:26

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

loading html content successfully but css style is not applied in angular2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related