how do i use same templateUrl in two difference component?

Question

im doing an online course and in one part of this, the teacher use the same templateUrl for two difference compoment and it goes ok, but when i try to do the same, my code doesnt run, it say "Property 'is_edit' does not exist on type 'ArtistAddComponent'"... it is not defined obviusly, but it is defined in the second one y wrote it... it is driving me crazy.

@Component({    
selector: 'artist-add',
templateUrl: '../views/artist-add.html',
providers: [UserService, ArtistService] 

})

export class ArtistAddComponent implements OnInit{

public titulo: string;
public artist: any;
public identity:any;
public token: any;
public url: String;
public errorMessage: any;
public alertMessage: any;

constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _userService: UserService,
    private _artistService: ArtistService

///////////////////////////////////////////

@Component({ selector: 'artist-edit', templateUrl: '../views/artist-add.html', providers: [UserService, ArtistService]

})

export class ArtistEditComponent implements OnInit{

public titulo: string;
public artist: any;
public identity:any;
public token: any;
public url: String;
public errorMessage: any;
public alertMessage: any;
public is_edit:any;


constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _userService: UserService,
    private _artistService: ArtistService

i´ve declarated this.is_edit=true; but i didnt write that part of the code.

////////////////////////////////////////////

this is the *ngIf that brokes the code,

<div *ngIf="is_edit">
    <div class="image_for_edit" *ngIf="artist.image != 'null'">
        <img src="{{url + 'get-image-artist/' + artist.image }}" />
    </div>

    <p>
    <label>Suba la imagen del artista</label>
    <input type="file" placeholder="subir imagen..." change="fileChangeEvent($event)" />
    </p>   
</div>

as you see, two difference selectors because they are diferent component.ts, but my teacher do it with no problem, so i need a package or something maybe he didnt gave us information?

Answer 1

As you told me, I couldn't find an answer why my teacher could do this in the course, I've followed your advices and created a HTMLcomponent for my artist-edit.ts file, then I used the name of my selector as a element in the artist-add.html <artist-edit></artist-edit> and it's running with no problem... now I can go ahead with my course, thanks,

Maybe my teacher is using an old version of angular that allowed him to do that.

But I'm really interested to know the logic behind this, how compilers act to let us know compile with no problem and why his version allows him use this in that way and why I can't... if you know the answer I'll be grateful.