We now need to create our playground component class. In your IDE, right-click the newly created playground directory and select New File and enter playground.component.ts as the name. The playground.component.ts file our component class. Enter the following code in this file:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'playground',
    templateUrl: './playground.component.html',
    styleUrls: ['./playground.component.css']
})
export class PlaygroundComponent implements OnInit {
 
    constructor() { }
 
    ngOnInit() { }
 
    pageTitle: string = "Playground";
 
}

By looking at our playground Component class file, you'll notice a few things:

• We're importing OnInit, in addition to the component from the @angular/core module. This is because we're giving ourselves a place to set up some variables if we need to—such as for passing in any child components.
• We've included a constructor for our class. Whether we use it or not, it provides us with a mechanism to tap into our component's life cycle to trigger some code if we wanted to. We won't use this right now, but I wanted to show you that our components function as traditional object-oriented classes, and thus have a constructor that we can leverage.
• We've set up our component to use external files for its template and its style, as opposed to having them inline. So, the next piece of business is to create these two files (see the following two sections).
• We have a single property (that is, pageTitle) declared in our class as a string, and we've assigned the name of our view to it. Our template in the following section displays this property using the one-way binding syntax.