如何将CSS样式传递给Angular 2组件？

Question

I've built an Angular2/4 component that is, basically, a masked date input. I use it in place of a textbox input, and have some code behind it to treat date conversions. It works well enough, but now i want to apply a CSS style and have it changing the input.

I want to write <app-date-input class='someCssClass'></app-date-input> and that class be attributed to my internal input.

My code for the component follows:

date-input.component.html

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DatePipe } from "@angular/common";
import * as moment from 'moment';

date-input.component.ts

import { AppConstantsService } from "../../_services";

@Component({
    selector: 'app-date-input',
    templateUrl: './date-input.component.html',
    styleUrls: ['./date-input.component.css'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => DateInputComponent),
        multi: true
    }]
})
export class DateInputComponent implements ControlValueAccessor {
    @Input()
    public valor: Date;

    @Input()
    public readonly: boolean;

    public dataString: string;

    constructor(public appConstants: AppConstantsService) {
    }

    atribuirData(dataEntrada: string) {
        if (!dataEntrada || dataEntrada == '') {
            this.valor = null;
            this.propagateChange(this.valor);
            return;
        }

        let parts = dataEntrada.split('/');

        try {
            let newDate = moment(parts[2] + '-' + parts[1] + '-' + parts[0]).toDate();
            // let newDate = new Date(+parts[2], +parts[1]-1, +parts[0]);

            this.valor = newDate;
            this.propagateChange(this.valor);
        } catch (error) {
            // return dataEntrada;
            console.log(error);
        }
    }

    writeValue(value: any) {
        this.valor = value;
        const datePipe = new DatePipe('pt-BR');
        this.dataString = datePipe.transform(this.valor, 'dd/MM/yyyy');
    }

    propagateChange = (_: any) => { };

    registerOnChange(fn) {
        this.propagateChange = fn;
    }

    registerOnTouched() {
    }
}

Answer 1

Although there are multiple ways to achieve this

1. Setting styles in the Child Component

   <app-date-input [childClass]='someCssClass'></app-date-input>

Now in DateInputComponent, create an @Input() property and in the HTML for the component, you can do something like

'<input [class]="input Variable Name">'