How to build directive name dynamically and bind this directive to element?

How I can build a directive name and then bind this directive name to one of elements inside the component's template?

For example, I have a component that receives alignment as input. Based on this alignment value I want to build a directive name (if it was just a string it would be just app-text-${alignment})

or something like that:

@Component({
    selector: 'app-component',
    template: `
        <div class="blahblahblah">
          <div [attr.app-text-{{ align }}]>
            <ng-content></ng-content>
          </div>
        </div>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
    @Input() align: 'left' | 'right' | 'center' = 'center';
}

Is that even possible?