How to css style angular2's Ng2-completer plugin input box and dropdown color?

Question

I am using angular2/4's Ng2-Completer plugin and am having trouble with styling of the component. I want to change the background dropdown to "red" and the input box to be blue.

The following is my plunkr: https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview

I tried to include the following CSS, but it does not appear to impact anything:

    .completer-row {
        display: inherit;
        background:blue;
    }

    .completer-selected-row {
        background-color: lightblue;
        color: yellow;
    }

    .completer-row p {
        position: relative;
        top: 50%;
        transform: translateY(50%);
    }

    .completer-dropdown-holder {
        position: absolute;
        background: red;
    }

    .customid {
    background:blue;
    }

My component:

    import { Component } from '@angular/core';
    import { CompleterService, CompleterData } from 'ng2-completer';
    import {Observable} from 'rxjs/Observable';
    import 'rxjs/Rx';

    @Component({
      selector: 'my-app',
  styleUrls: [
    './app.component.css'
  ],
      template: `<h1>Search color</h1>
                <ng2-completer id="customid" [(ngModel)]="searchStr" [datasource]="searchData" [minSearchLength]="0" [clearSelected]="true" (selected)="onSelected($event)"></ng2-completer>
                <p>Selected: {{selectedColor}}</p>
                `
    })
    export class AppComponent { 
      protected searchStr: string;
      protected dataService: CompleterData;
      protected selectedColor: string;
      protected searchData = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

      protected onSelected(item: CompleterItem) {
        this.selectedColor = item? item.title: "";
      }
    }

input[type="search"]{ background : blue } works for me ; – Jun 13 '17 at 19:31 — , Jun 13 '17 at 19:31

score 4 · Answer 1 · answered Jul 29 '17 at 07:10

4

You can use inputClass propery of ng2-completer. For example with bootstrap:

<ng2-completer [inputClass]="'form-control form-control-inline'" ...></ng2-completer>

answered Jul 29 '17 at 07:10

Guillaume Renoult

967
8
19

Great and clear answer but Why single quotes inside double quotes? and where I can find documentation for ng2-completer? – localhost Sep 28 '17 at 09:18
1

@Nofel brackets expect an expression, so in this case we need a string, that's why we have single quotes inside double quotes. See [Angular2 documentation](https://angular.io/guide/template-syntax#binding-syntax-an-overview). ng2-completer documentation can be found [here](https://github.com/oferh/ng2-completer). – Guillaume Renoult Oct 02 '17 at 23:45

score 1 · Answer 2 · answered Nov 14 '17 at 12:10

1

You can style the angular ng2 completer like this:

::ng-deep .completer-row{

        }

answered Nov 14 '17 at 12:10

ferralucho

637
7
24

score 0 · Accepted Answer · answered Jun 13 '17 at 19:15

0

Angular 2 have a safety feature where CSS only work on HTML files of their respected component. Or css have to go in the global styles.css file for global use. However you can force CSS to apply by adding hots: >>> .class-name this method will force the css to apply to a child component. More info on this thread Angular 2: How to style host element of the component? https://alligator.io/angular/styles-between-components-angular/

answered Jun 13 '17 at 19:15

Prav

2,785
1
21
30

Could you show me an example of this using the ng2-completer I am trying to use what you've described with a combination of wrapping the classes in :hosts(.classname) and /deep/ .classname, but here appears to be no effect. – Rolando Jun 13 '17 at 19:19
Try `host: >>> .completer-row { display: inherit; background:blue; }` this seen to work when I did a similar thing. Make sure there are no space between angle brackets. If you are using IDE like intelliJ it tend to space them on formatting. – Prav Jun 13 '17 at 19:37
youc an see an example in `ng2-completer` [demo](https://github.com/oferh/ng2-completer/blob/master/demo/native-cmp.css#L28) – Ofer Herman Jun 14 '17 at 08:34

How to css style angular2's Ng2-completer plugin input box and dropdown color?

3 Answers3