Reference for typescript parent or its child class in Angular HTML template

This is how TS unions work:

export interface DummyParent {
    dummy1?: string;
    dummy2?: number;
}

export interface DummyChild1 extends DummyParent {
    foo1?: string;
    bar1: number;
}
export interface DummyChild2 extends DummyParent {
    foo2?: string;
    bar2: number;
}

type Union = DummyParent | DummyChild1 | DummyChild2

declare var union: Union;

// only dumm1 and dummy2 are available
union.dummy1
union.dummy2

union allows you to use common properties from all dummy types. Because each type extends DummyParent you are allowed to use only properties from DummyParent.

In order to make it safe, you should use custom type guards:

export interface DummyParent {
    dummy1?: string;
    dummy2?: number;
}

export interface DummyChild1 extends DummyParent {
    foo1?: string;
    bar1: number;
}
export interface DummyChild2 extends DummyParent {
    foo2?: string;
    bar2: number;
}

type Union = DummyParent | DummyChild1 | DummyChild2

declare var union: Union;

// only dumm1 and dummy2 are available
union.dummy1
union.dummy2


const isOne = (union: Union): union is DummyChild1 => 'bar1' in union
const isTwo = (union: Union): union is DummyChild2 => 'bar2' in union

if(isOne(union)){
    union.bar1 // ok
}

if(isTwo(union)){
    union.bar2 // ok
}

Then, I assume you can do smth like that:

<ng-container *ngIf="isTwo(union)">
 // do smth with union.bar2
</ng-container>

P.S. I'm not 100% sure that in operator is the best solution for such kind of typeguard. You can also consider this:

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);

My question is that, how should I instantiate @Input() dummy to be a typeof DummyParent OR DummyChild1 OR DummyChild2.

That's what you're currently doing. If you're saying something is either type A, type B or type C you can only acces the properties that exist on ALL THREE types. Otherwise, what would be the point of explicit typing if you could still access non-existent properties?

And since in your cases B and C inherit after A, it will be only properties of type A. If you want to access properties of type A, you have narrow the type to A (e.g. by using type guard).

You can read more about it in the official TypeScript docs here.