Angular Project Setup Guide

1. Create Angular Project

First, create a folder for your project, name it with what you want,

I created a folder naming it Angular-App, inside the folder I created my angular folder with the name, Angular-Components, inside I created the angular project Ang-Components.

Then Install npm for angular-cli.

Then Change Directory again to activate my Angular Project

Then use ng serve to run the project.

Copy and Paste the link to your Browser.

Open folder on VScode :

2. Create Components Folder

Inside the src/app/ directory, create a components folder. This will hold all the components you generate.

3. Generate Components

I put in note pad the commands for the 40 components

additional 10 components

4. Modify `app.module.ts`

Open the src/app/app.module.ts file and import all the components you created. Add them to the declarations array.

If you don't have an app.module.ts file, you'll need to create one. at src/app/app.module.ts

Code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

import { DisplayhelloworldComponent } from './components/displayhelloworld/displayhelloworld.component';
import { ShowhellobuttonComponent } from './components/showhellobutton/showhellobutton.component';
import { DisplaynameComponent} from './components/displayname/displayname.component';
import { CounterComponent } from './components/counter/counter.component';
import { SimpleformComponent } from './components/simpleform/simpleform.component';
import { UserageComponent } from './components/userage/userage.component';
import { UsergreetingComponent } from './components/usergreeting/usergreeting.component';
import { CalculatorComponent } from './components/calculator/calculator.component';
import { TextlengthComponent } from './components/textlength/textlength.component';
import { CurrencyconverterComponent } from './components/currencyconverter/currencyconverter.component';
import { EvenoddcheckerComponent } from './components/evenoddchecker/evenoddchecker.component';
import { WordreverserComponent } from './components/wordreverser/wordreverser.component';
import { ShowdateComponent } from './components/showdate/showdate.component';
import { ShowusernameComponent } from './components/showusername/showusername.component';
import { MultiplicationtableComponent } from './components/multiplicationtable/multiplicationtable.component';
import { SimpleloginComponent } from './components/simplelogin/simplelogin.component';
import { FahrenheittocelsiusComponent } from './components/fahrenheittocelsius/fahrenheittocelsius.component';
import { BookmarklistComponent } from './components/bookmarklist/bookmarklist.component';
import { CharactercounterComponent } from './components/charactercounter/charactercounter.component';
import { PalindromecheckerComponent } from './components/palindromechecker/palindromechecker.component';
import { TemperatureconverterComponent } from './components/temperatureconverter/temperatureconverter.component';
import { ShoppinglistComponent } from './components/shoppinglist/shoppinglist.component';
import { FactorialcalculatorComponent } from './components/factorialcalculator/factorialcalculator.component';
import { TodomanagerComponent } from './components/todomanager/todomanager.component';
import { GuessnumbergameComponent } from './components/guessnumbergame/guessnumbergame.component';
import { WordcounterComponent } from './components/wordcounter/wordcounter.component';
import { RandomnumbergeneratorComponent } from './components/randomnumbergenerator/randomnumbergenerator.component';
import { MultiplicationcheckerComponent } from './components/multiplicationchecker/multiplicationchecker.component';
import { UppercaseconverterComponent } from './components/uppercaseconverter/uppercaseconverter.component';
import { WordshufflerComponent } from './components/wordshuffler/wordshuffler.component';
import { BmisolverComponent } from './components/bmisolver/bmisolver.component';
import { UsernamevalidatorComponent } from './components/usernamevalidator/usernamevalidator.component';
import { InterestcalculatorComponent } from './components/interestcalculator/interestcalculator.component';
import { CompoundinterestcalculatorComponent } from './components/compoundinterestcalculator/compoundinterestcalculator.component';
import { FibonaccigeneratorComponent } from './components/fibonaccigenerator/fibonaccigenerator.component';
import { OddsumcalculatorComponent } from './components/oddsumcalculator/oddsumcalculator.component';
import { CurrencyformatterComponent } from './components/currencyformatter/currencyformatter.component';
import { RandomquotedisplayComponent } from './components/randomquotedisplay/randomquotedisplay.component';
import { UppercasegreetingComponent } from './components/uppercasegreeting/uppercasegreeting.component';
import { DivisiblecheckerComponent } from './components/divisiblechecker/divisiblechecker.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AutoclickerComponent } from './components/autoclicker/autoclicker.component';
import { AutofinderComponent } from './components/autofinder/autofinder.component';
import { IdcheckerComponent } from './components/idchecker/idchecker.component';
import { AiassistantComponent } from './components/aiassistant/aiassistant.component';
import { LocationfinderComponent } from './components/locationfinder/locationfinder.component';
import { BioscannerComponent } from './components/bioscanner/bioscanner.component';
import { CamscannerComponent } from './components/camscanner/camscanner.component';
import { NotificationComponent } from './components/notification/notification.component';
import { GalleryviewerComponent } from './components/galleryviewer/galleryviewer.component';
import { ScorecheckerComponent } from './components/scorechecker/scorechecker.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule ,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes, { enableTracing: true })

  ],
  declarations: [
    AppComponent,
    DisplayhelloworldComponent,
    ShowhellobuttonComponent,
    DisplaynameComponent,
    CounterComponent,
    SimpleformComponent,
    UserageComponent,
    UsergreetingComponent,
    CalculatorComponent,
    TextlengthComponent,
    CurrencyconverterComponent,
    EvenoddcheckerComponent,
    WordreverserComponent,
    ShowdateComponent,
    ShowusernameComponent,
    MultiplicationtableComponent,
    SimpleloginComponent,
    FahrenheittocelsiusComponent,
    BookmarklistComponent,
    CharactercounterComponent,
    PalindromecheckerComponent,
    TemperatureconverterComponent,
    ShoppinglistComponent,
    FactorialcalculatorComponent,
    TodomanagerComponent,
    GuessnumbergameComponent,
    WordcounterComponent,
    RandomnumbergeneratorComponent,
    MultiplicationcheckerComponent,
    UppercaseconverterComponent,
    WordshufflerComponent,
    BmisolverComponent,
    UsernamevalidatorComponent,
    InterestcalculatorComponent,
    CompoundinterestcalculatorComponent,
    FibonaccigeneratorComponent,
    OddsumcalculatorComponent,
    CurrencyformatterComponent,
    RandomquotedisplayComponent,
    UppercasegreetingComponent,
    DivisiblecheckerComponent,
    AutoclickerComponent,
    AutofinderComponent,
    IdcheckerComponent,
    AiassistantComponent,
    LocationfinderComponent,
    BioscannerComponent,
    CamscannerComponent,
    NotificationComponent,
    GalleryviewerComponent,
    ScorecheckerComponent,






  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Set Up Routing

Check your file, If your app uses routing, Create if none, or modify `src/app/app-routing.module.ts` file if it is already in the folder and configure the routes for each component.

Code:


import { Routes } from '@angular/router';
import { DisplayhelloworldComponent } from './components/displayhelloworld/displayhelloworld.component';
import { ShowhellobuttonComponent } from './components/showhellobutton/showhellobutton.component';
import { DisplaynameComponent } from './components/displayname/displayname.component';
import { CounterComponent } from './components/counter/counter.component';
import { SimpleformComponent } from './components/simpleform/simpleform.component';
import { UserageComponent } from './components/userage/userage.component';
import { UsergreetingComponent } from './components/usergreeting/usergreeting.component';
import { CalculatorComponent } from './components/calculator/calculator.component';
import { TextlengthComponent } from './components/textlength/textlength.component';
import { CurrencyconverterComponent } from './components/currencyconverter/currencyconverter.component';
import { EvenoddcheckerComponent } from './components/evenoddchecker/evenoddchecker.component';
import { WordreverserComponent } from './components/wordreverser/wordreverser.component';
import { ShowdateComponent } from './components/showdate/showdate.component';
import { ShowusernameComponent } from './components/showusername/showusername.component';
import { MultiplicationtableComponent } from './components/multiplicationtable/multiplicationtable.component';
import { SimpleloginComponent } from './components/simplelogin/simplelogin.component';
import { FahrenheittocelsiusComponent } from './components/fahrenheittocelsius/fahrenheittocelsius.component';
import { BookmarklistComponent } from './components/bookmarklist/bookmarklist.component';
import { CharactercounterComponent } from './components/charactercounter/charactercounter.component';
import { PalindromecheckerComponent } from './components/palindromechecker/palindromechecker.component';
import { TemperatureconverterComponent } from './components/temperatureconverter/temperatureconverter.component';
import { ShoppinglistComponent } from './components/shoppinglist/shoppinglist.component';
import { FactorialcalculatorComponent } from './components/factorialcalculator/factorialcalculator.component';
import { TodomanagerComponent } from './components/todomanager/todomanager.component';
import { GuessnumbergameComponent } from './components/guessnumbergame/guessnumbergame.component';
import { WordcounterComponent } from './components/wordcounter/wordcounter.component';
import { RandomnumbergeneratorComponent } from './components/randomnumbergenerator/randomnumbergenerator.component';
import { MultiplicationcheckerComponent } from './components/multiplicationchecker/multiplicationchecker.component';
import { UppercaseconverterComponent } from './components/uppercaseconverter/uppercaseconverter.component';
import { WordshufflerComponent } from './components/wordshuffler/wordshuffler.component';
import { BmisolverComponent } from './components/bmisolver/bmisolver.component';
import { UsernamevalidatorComponent } from './components/usernamevalidator/usernamevalidator.component';
import { InterestcalculatorComponent } from './components/interestcalculator/interestcalculator.component';
import { CompoundinterestcalculatorComponent } from './components/compoundinterestcalculator/compoundinterestcalculator.component';
import { FibonaccigeneratorComponent } from './components/fibonaccigenerator/fibonaccigenerator.component';
import { OddsumcalculatorComponent } from './components/oddsumcalculator/oddsumcalculator.component';
import { CurrencyformatterComponent } from './components/currencyformatter/currencyformatter.component';
import { RandomquotedisplayComponent } from './components/randomquotedisplay/randomquotedisplay.component';
import { UppercasegreetingComponent } from './components/uppercasegreeting/uppercasegreeting.component';
import { DivisiblecheckerComponent } from './components/divisiblechecker/divisiblechecker.component';
import { AutoclickerComponent } from './components/autoclicker/autoclicker.component';
import { AutofinderComponent } from './components/autofinder/autofinder.component';
import { IdcheckerComponent } from './components/idchecker/idchecker.component';
import { AiassistantComponent } from './components/aiassistant/aiassistant.component';
import { LocationfinderComponent } from './components/locationfinder/locationfinder.component';
import { BioscannerComponent } from './components/bioscanner/bioscanner.component';
import { CamscannerComponent } from './components/camscanner/camscanner.component';
import { NotificationComponent } from './components/notification/notification.component';
import { GalleryviewerComponent } from './components/galleryviewer/galleryviewer.component';
import { ScorecheckerComponent } from  './components/scorechecker/scorechecker.component';



export const routes: Routes = [
    { path: 'display-hello-world', component: DisplayhelloworldComponent },
    { path: 'show-hello-button', component: ShowhellobuttonComponent },
    { path: 'display-name', component: DisplaynameComponent },
    { path: 'counter', component: CounterComponent },
    { path: 'simple-form', component: SimpleformComponent },
    { path: 'user-age', component: UserageComponent },
    { path: 'user-greeting', component: UsergreetingComponent },
    { path: 'calculator', component: CalculatorComponent },
    { path: 'text-length', component: TextlengthComponent },
    { path: 'currency-converter', component: CurrencyconverterComponent },
    { path: 'even-odd-checker', component: EvenoddcheckerComponent },
    { path: 'word-reverser', component: WordreverserComponent },
    { path: 'show-date', component: ShowdateComponent },
    { path: 'show-username', component: ShowusernameComponent },
    { path: 'multiplication-table', component: MultiplicationtableComponent },
    { path: 'simple-login', component: SimpleloginComponent },
    { path: 'fahrenheit-to-celsius', component: FahrenheittocelsiusComponent },
    { path: 'bookmark-list', component: BookmarklistComponent },
    { path: 'character-counter', component: CharactercounterComponent },
    { path: 'palindrome-checker', component: PalindromecheckerComponent },
    { path: 'temperature-converter', component: TemperatureconverterComponent },
    { path: 'shopping-list', component: ShoppinglistComponent },
    { path: 'factorial-calculator', component: FactorialcalculatorComponent },
    { path: 'todo-manager', component: TodomanagerComponent },
    { path: 'guess-number-game', component: GuessnumbergameComponent },
    { path: 'word-counter', component: WordcounterComponent },
    { path: 'random-number-generator', component: RandomnumbergeneratorComponent },
    { path: 'multiplication-checker', component: MultiplicationcheckerComponent },
    { path: 'uppercase-converter', component: UppercaseconverterComponent },
    { path: 'word-shuffler', component: WordshufflerComponent },
    { path: 'bmi-solver', component: BmisolverComponent },
    { path: 'username-validator', component: UsernamevalidatorComponent },
    { path: 'interest-calculator', component: InterestcalculatorComponent },
    { path: 'compound-interest-calculator', component: CompoundinterestcalculatorComponent },
    { path: 'fibonacci-generator', component: FibonaccigeneratorComponent },
    { path: 'odd-sum-calculator', component: OddsumcalculatorComponent },
    { path: 'currency-formatter', component: CurrencyformatterComponent },
    { path: 'random-quote-display', component: RandomquotedisplayComponent },
    { path: 'uppercase-greeting', component: UppercasegreetingComponent },
    { path: 'divisible-checker', component: DivisiblecheckerComponent },
    { path: 'auto-clicker', component: AutoclickerComponent },
    { path: 'auto-finder', component: AutofinderComponent},
    { path: 'id-checker', component: IdcheckerComponent},
    { path: 'ai-assistant', component: AiassistantComponent},
    { path: 'location-finder', component: LocationfinderComponent},
    { path: 'bio-scanner', component: BioscannerComponent},
    { path: 'cam-scanner', component: CamscannerComponent},
    { path: 'notification', component: NotificationComponent},
    { path: 'gallery-viewer', component: GalleryviewerComponent},
    { path: 'score-checker', component: ScorecheckerComponent},
    { path: '', redirectTo: '/display-hello-world', pathMatch: 'full' }





];

6. Setting Up `app.component.html`

Code:

<div class="container">
    <h1>Angular Components</h1>
    <nav>
        <ol>
            <li><a routerLink="/display-hello-world">Display Hello World</a></li>
            <li><a routerLink="/show-hello-button">Show Hello Button</a></li>
            <li><a routerLink="/display-name">Display Name</a></li>
            <li><a routerLink="/counter">Counter</a></li>
            <li><a routerLink="/simple-form">Simple Form</a></li>
            <li><a routerLink="/user-age">User Age</a></li>
            <li><a routerLink="/user-greeting">User Greeting</a></li>
            <li><a routerLink="/calculator">Calculator</a></li>
            <li><a routerLink="/text-length">Text Length</a></li>
            <li><a routerLink="/currency-converter">Currency Converter</a></li>
        </ol>
        <ol start="11">
            <!-- This ensures the second list starts numbering from 11 -->
            <li><a routerLink="/even-odd-checker">Even/Odd Checker</a></li>
            <li><a routerLink="/word-reverser">Word Reverser</a></li>
            <li><a routerLink="/show-date">Show Date</a></li>
            <li><a routerLink="/show-username">Show Username</a></li>
            <li><a routerLink="/multiplication-table">Multiplication Table</a></li>
            <li><a routerLink="/simple-login">Simple Login</a></li>
            <li><a routerLink="/fahrenheit-to-celsius">Fahrenheit to Celsius</a></li>
            <li><a routerLink="/bookmark-list">Bookmark List</a></li>
            <li><a routerLink="/character-counter">Character Counter</a></li>
            <li><a routerLink="/palindrome-checker">Palindrome Checker</a></li>
        </ol>
        <ol start="21">
            <!-- This ensures the third list starts numbering from 21 -->
            <li><a routerLink="/temperature-converter">Temperature Converter</a></li>
            <li><a routerLink="/shopping-list">Shopping List</a></li>
            <li><a routerLink="/factorial-calculator">Factorial Calculator</a></li>
            <li><a routerLink="/todo-manager">Todo Manager</a></li>
            <li><a routerLink="/guess-number-game">Guess Number Game</a></li>
            <li><a routerLink="/word-counter">Word Counter</a></li>
            <li><a routerLink="/random-number-generator">Random Number Generator</a></li>
            <li><a routerLink="/multiplication-checker">Multiplication Checker</a></li>
            <li><a routerLink="/uppercase-converter">Uppercase Converter</a></li>
            <li><a routerLink="/word-shuffler">Word Shuffler</a></li>
        </ol>
        <ol start="31">
            <!-- This ensures the fourth list starts numbering from 31 -->
            <li><a routerLink="/bmi-solver">BMI Solver</a></li>
            <li><a routerLink="/username-validator">Username Validator</a></li>
            <li><a routerLink="/interest-calculator">Interest Calculator</a></li>
            <li><a routerLink="/compound-interest-calculator">Compound Interest Calculator</a></li>
            <li><a routerLink="/fibonacci-generator">Fibonacci Generator</a></li>
            <li><a routerLink="/odd-sum-calculator">Odd Sum Calculator</a></li>
            <li><a routerLink="/currency-formatter">Currency Formatter</a></li>
            <li><a routerLink="/random-quote-display">Random Quote Display</a></li>
            <li><a routerLink="/uppercase-greeting">Uppercase Greeting</a></li>
            <li><a routerLink="/divisible-checker">Divisibility Checker</a></li>
        </ol>
        <ol start="41">
            <!-- This ensures the fourth list starts numbering from 41 -->
            <li><a routerLink="/auto-clicker">Auto Clicker</a></li>
            <li><a routerLink="/auto-finder">Auto Finder</a> </li>
            <li><a routerLink="/id-checker">Id Checker</a></li>
            <li><a routerLink="/ai-assistant">AI Assistant</a></li>
            <li><a routerLink="/location-finder">Location Finder</a></li>
            <li><a routerLink="/bio-scanner">Bio Scanner</a></li>
            <li><a routerLink="/cam-scanner">Cam Scanner</a></li>
            <li><a routerLink="/notification">Notification</a></li>
            <li><a routerLink="/gallery-viewer">Gallery Viewer</a></li>
            <li><a routerLink="/score-checker">Score Checker</a></li>
        </ol>





    </nav>
    <hr>



    <router-outlet></router-outlet>
</div>

ACTIVITY 8: Angular Components

Table of contents

Angular Project Setup Guide

1. Create Angular Project

First, create a folder for your project, name it with what you want,

2. Create Components Folder

3. Generate Components

4. Modify `app.module.ts`

Code:

5. Set Up Routing

Check your file, If your app uses routing, Create if none, or modify `src/app/app-routing.module.ts` file if it is already in the folder and configure the routes for each component.

Code:

6. Setting Up `app.component.html`

Code:

7. Output

8. Commit and Push to GitHub:

9. GITHUB Repository:

Reference Link of Github Repository: Angular-Components

ACTIVITY 8: Angular Components

Table of contents

Angular Project Setup Guide

1. Create Angular Project

First, create a folder for your project, name it with what you want,

2. Create Components Folder

3. Generate Components

4. Modify app.module.ts

Code:

5. Set Up Routing

Check your file, If your app uses routing, Create if none, or modify src/app/app-routing.module.ts file if it is already in the folder and configure the routes for each component.

Code:

6. Setting Up app.component.html

Code:

7. Output

8. Commit and Push to GitHub:

9. GITHUB Repository:

Reference Link of Github Repository: Angular-Components

4. Modify `app.module.ts`

Check your file, If your app uses routing, Create if none, or modify `src/app/app-routing.module.ts` file if it is already in the folder and configure the routes for each component.

6. Setting Up `app.component.html`