Changing look while updating project to Angular 5

[elieahd]

Once our project was updated to angular 5, the component changed look it seems like no css is applied to the component.

While installing node modules with npm install, a warning has appeared : Angular-2-dropdown-select@1.7.0 requires a peer of @angular/common@^4.0.0 but none was installed angular-2-dropdown-select@1.7.0 requires a peer of @angular/core@^4.0.0 but none was installed angular-2-dropdown-select@1.7.0 requires a peer of @angular/forms@^4.0.0 but none was installed

[fstasi]

same here, I'm trying to fix, but i'm not able to build properly with the given package.json.

Seems like the css file is not included

[jeesim2]

same too, it's UI has broken.

any work around?

[jeesim2]

Generated html tag of an dropdown-item is different.

with angular 4

<li _ngcontent-c16="" class="dropdown-item" style="cursor: pointer;">
  <a _ngcontent-c16="" href="javascript:;" role="menuitem" tabindex="-1">
    <input _ngcontent-c16="" type="checkbox"> 
    <span _ngcontent-c16="" style="font-weight: normal;">Unique users</span>
  </a>
</li>

with angular 5

<a _ngcontent-c17="" class="dropdown-item active" href="javascript:;" tabindex="-1" ng-reflect-klass="dropdown-item" ng-reflect-ss-autofocus="true">
  <span _ngcontent-c17="" role="menuitem" tabindex="-1">
    <input _ngcontent-c17="" type="checkbox">
    <span _ngcontent-c17="" ng-reflect-ng-class="[object Object]" style="font-weight: normal;">Unique users</span>
  </span>
</a>

• when I changed html tag same to angular4 generated in chrome debugger It's UI seems ok.

  <li _ngcontent-c17="" class="dropdown-item active" href="javascript:;" tabindex="-1" ng-reflect-klass="dropdown-item" ng-reflect-ss-autofocus="true">
  <a _ngcontent-c17="" role="menuitem" tabindex="-1">
  <input _ngcontent-c17="" type="checkbox">
  <span _ngcontent-c17="" ng-reflect-ng-class="[object Object]" style="font-weight: normal;">Unique users</span>
  </a>
  </li>

[nok32]

Hy, any solution

[minhthuan274]

Me too

[nitimmerman]

Same issue here. downgrading to version 1.6.3 for now

[fstasi]

guys, I found out... just updagrade to bootstrap 4, and it will work as intended.

Cheers.

[minhthuan274]

Sorry, but I'm using template which is used bootstrap 3

[gsaxam]

I have the same problem.

[gsaxam]

I fixed it using the below package.jsonand running npm update after that.

"dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@angular/upgrade": "^5.2.9",
    "angular-2-dropdown-multiselect": "1.6.3",
    "angular-in-memory-web-api": "~0.1.1",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.5.0",
    "semantic-ui-css": "^2.2.12",
    "systemjs": "0.19.39",
    "traceur": "^0.0.96",
    "zone.js": "^0.8.4"
  }

[markbecker7]

I had the same issue, inserting this css made it look presentable for the time being.

`:host /deep/ ss-multiselect-dropdown .dropdown-item { color: black; display: inherit; padding-left: 15px; }

:host /deep/ ss-multiselect-dropdown .dropdown-menu > a:hover { color: black; text-decoration: none; background-color: lightgray; }

:host /deep/ ss-multiselect-dropdown .dropdown-menu > a:focus { color: black; text-decoration: none; outline: none !important; }`

[simonaberry]

@markbecker7 where do you put this css ?