Custom Style for Child elements

Hi gmerabishvili,

I love angular-ng-autocomplete. Thanks for make it.

Is it possible to enable custom style for elements like “input”?.

I have been added custom css like:

.ng-autocomplete { width: 100%; }

And this is ok.

But when I tried to add this nothing happened:

.ng-autocomplete .autocomplete-container { box-shadow: none !important; }

Thanks.

[gmerabishvili]

Hi @enriqueavg , Thank you very much! Yes it is possible. You just need to use ::ng-deep. Here is the example:

.ng-autocomplete {
  ::ng-deep .autocomplete-container {
    box-shadow: none;
  }
}

[enriqueavg]

Hi,

something.component.css looks like this:

`.ng-autocomplete { width: 100%; }

.ng-autocomplete ::ng-deep .autocomplete-container { box-shadow: none; }

.ng-autocomplete ::ng-deep .autocomplete-container ::ng-deep .input-container ::ng-deep input { font-size: 0.875rem; display: block; height: 2.1875rem; padding: 0.375rem 1rem; font-weight: 400; line-height: 1.52857143; color: #495057; border: 1px solid #dde6e9; border-radius: 0.25rem; }

.ng-autocomplete ::ng-deep .autocomplete-container ::ng-deep .suggestions-container ::ng-deep .item ::ng-deep .row { padding: 0.5rem 1rem; }

.ng-autocomplete ::ng-deep .autocomplete-container ::ng-deep .not-found { border: 0; }`

And something.component.html:

` <div class="ng-autocomplete">

        <!-- START ng-autocomplete component -->
        <!-- <ng-autocomplete [data]="data" [searchKeyword]="keyword" [initialValue]="value" (selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)' (inputFocused)='onFocused($event)' [itemTemplate]="itemTemplate" #auto minQueryLength="2" debounceTime="300"
            [notFoundTemplate]="notFoundTemplate">
        </ng-autocomplete> -->
        <!-- END ng-autocomplete component -->

        <!-- START template -->
        <ng-template #itemTemplate let-item>
            <div class="row">
                <div class="col-8">
                    <span [innerHTML]="item.name"></span>
                </div>
            </div>
        </ng-template>
        <!-- END template -->

        <!-- START template NOT FOUND -->
        <ng-template #notFoundTemplate let-notFound>

        </ng-template>
        <!-- END template NOT FOUND -->

    </div>
    <!-- END ng-autocomplete class -->
</div>
<!-- END col-12 -->

`