Angular Application Code Snippets

about.component.html

<!-- About Component-->
<section id="about">
    <div class="container px-4">
        <div class="row gx-4 justify-content-center">
            <div class="col-lg-8">
                <h2>About</h2>
                <p class="lead">This is the About Page!
                </p>
                <ul>
                  <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid explicabo natus perferendis? Corporis fuga assumenda aperiam ab consequuntur vitae doloremque aliquam placeat distinctio molestiae in, optio molestias debitis non quam.</li>
                  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, similique at eaque ipsam nam, temporibus sapiente omnis quod aut qui vel iure. Aspernatur ex deserunt corporis sunt ipsum neque sint.</li>
                  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda provident vel qui asperiores, explicabo earum accusamus veritatis ad doloremque velit sunt at quos ratione rerum tenetur et ex temporibus veniam!</li>
                    
                </ul>
            </div>
        </div>
    </div>
  </section>

app.component.html

<!--This shows the components to go to, routing one after the other-->
<app-navbar></app-navbar>
<app-header></app-header>
<app-about></app-about>
<app-services></app-services>
<app-contact></app-contact>
<app-footer></app-footer>
<router-outlet></router-outlet>

app.component.ts

<!--Importing of various required components -->
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { FooterComponent } from "./footer/footer.component";
import { ServicesComponent } from "./services/services.component";
import { AboutComponent } from "./about/about.component";
import { HeaderComponent } from "./header/header.component";
import { NavbarComponent } from "./navbar/navbar.component";
import { ContactComponent } from "./contact/contact.component";

@Component({
    selector: 'app-root',
    standalone: true,
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
    imports: [CommonModule, RouterOutlet, FooterComponent, ServicesComponent, AboutComponent, HeaderComponent, NavbarComponent, ContactComponent]
})
export class AppComponent {
  title = 'AngularSite';
}

app1.component.ts

// app1.component.ts
//This is a sample code snippet on Angular
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: '<h1>{{ greeting }}</h1>',
})
export class AppComponent {
  greeting: string = 'Hello, Angular!';
}

contact.component.html

<!-- Contact Component-->
<section id="contact">
    <div class="container px-4">
        <div class="row gx-4 justify-content-center">
            <div class="col-lg-8">
                <h2>Contact us</h2>
                <p class="lead">This is the contact page!</p>
                <ul>
                  <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid explicabo natus perferendis? Corporis fuga assumenda aperiam ab consequuntur vitae doloremque aliquam placeat distinctio molestiae in, optio molestias debitis non quam.</li>
                  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, similique at eaque ipsam nam, temporibus sapiente omnis quod aut qui vel iure. Aspernatur ex deserunt corporis sunt ipsum neque sint.</li>
                  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda provident vel qui asperiores, explicabo earum accusamus veritatis ad doloremque velit sunt at quos ratione rerum tenetur et ex temporibus veniam!</li>    
                </ul>
            </div>
        </div>
    </div>
  </section>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d254718.63181990688!2d39.531175508585626!3d-4.024771726487291!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x18400cc37d5f8e33%3A0xb0af81240578412c!2sMombasa%20County!5e0!3m2!1sen!2ske!4v1701952355151!5m2!1sen!2ske" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

footer.component.html

<!-- Footer Component-->
<footer class="py-5 bg-dark">
    <div class="container px-4"><p class="m-0 text-center text-white">Copyright &copy; Geoff Website 2023</p></div>
  </footer>

header.component.html

<!-- Header Component-->
<header class="bg-primary bg-gradient text-white">
    <div class="container px-4 text-center">
        <h1 class="fw-bolder">This is a sample Angular Site</h1>
        <p class="lead">A functional test site created using a bootstrap template</p>
        <a class="btn btn-lg btn-light" href="#about">Welcome!</a>
    </div>
  </header>

index.html

<!--This is the html index page used for adding bootstrap cdn links in my angular application -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularSite</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.css">
</head>
<body id="page-top">
   
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

  <app-root></app-root>
</body>
</html>

mapembedd.component.html

<!--Embedding Map Component -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d254718.63181990688!2d39.531175508585626!3d-4.024771726487291!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x18400cc37d5f8e33%3A0xb0af81240578412c!2sMombasa%20County!5e0!3m2!1sen!2ske!4v1701952355151!5m2!1sen!2ske" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

navbar.component.html

<!--Navigation Component -->
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <div class="container px-4">
        <a class="navbar-brand" href="#page-top">HomePage</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
  </nav>