Skip to content
Angular Essentials
GitHub

Creating new component

A template is a blueprint for a fragment of a user interface (UI).

Almost all HTML syntax is valid template syntax. However, because an Angular template is only a fragment of the UI, it does not include elements such as <html>, <body>, or <base>.

To eliminate the risk of script injection attacks, Angular does not support the <script> element in templates. Angular ignores the <script> tag and outputs a warning to the browser console. For more information, see the Security page.

ng g c components/card --skip-tests=true

Angular cli command follows the structure ng g <schematic> or ng generate <schematic>.

Here we are using the subcommand ng g c [name] which is short ng generate components [name]. We can also pass options to these command. For e.g, --skip-tests=true specifies there is no need to generate the spec.ts file.

More on Angular cli command here.

card.component.scss

.card-container {
    display: flex;
    flex-direction: row;
}

.card {
    max-width: 400px;
    margin: 5px;
}

Import CardComponent in AppComponent so we can use it.

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    standalone: true,
    imports: [CardComponent]
})
export class AppComponent {
}

Also in app.component.html. app-card is a unique identifier for CardComponent that is provided in CardComponent’s selector value.

<app-card></app-card>

styles.scss

html, body {
    height: 100%;
}

body {
    margin: 10px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    color: white;
    background-color: #303030;
}