# ACTIVITY 7: Angular Basic Routing

Create a simple Angular project with basic routing and four components: **login**, **signup**, **homepage**, and **landing page**. The project will showcase the use of Angular routing to navigate between these components.

### **Instructions:**

1. **Repository Setup:**
    
    * Name your GitHub repository **AngularBasicRouting**.
        
2. **Create Four Components:**
    
    * Generate the following components using Angular CLI:
        
        * login = **ng** generate component components/login
            
        * signup = **ng** generate component components/signup
            
        * homepage = **ng** generate component components/homepage
            
        * landing page = **ng** generate component components/landing-page
            
    * Implement basic functionality and structure for each component using **HTML** and **TypeScript** only (no design or CSS required).
        
3. **Set Up Routing:**
    
    * Set up Angular routing to navigate between the **login**, **signup**, **homepage**, and **landing page** components.
        
    * Use the [documentation](https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes) or refer to the class recording to assist you in setting up routing.
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565623003/d03c345b-e0dc-4848-8793-a1dfa176cd08.png align="center")
        
4. **Document on Hashnode:**
    
    * Write a brief article on [Hashnode](https://hashnode.com/) documenting your activity.
        
    * Include code snippets that explain how you created the components and configured routing.
        
    * Provide the link to your **AngularBasicRouting** GitHub repository in the post.
        
5. **Share on the Portal:**
    
    * Once you’ve completed the Hashnode documentation, share the link to your article on our portal.
        

Good luck with your Angular routing practice!

**OUTPUT**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726660128399/f0981a99-6bc5-4bed-b747-67dbbf2cb6b4.gif align="center")

homepage

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565860809/43736e90-c990-4cb9-8956-c56cb35591f4.png align="center")

login

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565884207/1976e887-604e-4046-8093-a0eddd61ab5d.png align="center")

signup

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565899810/f6432fc2-8fc5-4560-bdc3-ea7a9be7e55b.png align="center")

landing page

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565913983/70a1faa3-712c-4075-adf3-7d167ef757c6.png align="center")

**Github Repository**

[https://github.com/RodelDecio/AngularBasicRouting.git](https://github.com/RodelDecio/AngularBasicRouting.git)