Skip to main content

Related Articles

Loading...

Adding styles to your Angular App



  How to set up Angular environment

             How to create Angular project

             How to generate component and define routings in Angular


Let’s make our app little bit interactive.

You can put all your common style of your application to style.css file which applies globally.

Copy and paste below code in your style.css file

/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');

$primary: rgb(216, 172, 78);

body {

    margin: 0;

    font-family: 'Nunito', 'sans-serif';

    font-size: 18px;

}

.container {

    width: 80%;

    margin: 0 auto;

}

header {

    background: $primary;

    padding: 1em 0;

    a {

        color: white;

        text-decoration: none;

    }

    a.logo {

        font-weight: bold;

    }

    nav {

        float: right;

        ul {

            list-style-type: none;

            margin: 0;

            display: flex;

            li a {

                padding: 1em;

                &:hover {

                    background: darken($primary, 10%);

                }

            }

        }

    }

}

h1 {

    margin-top: 2em;

}

Copy and paste below code in your app.component.html

<header>

  <div class="container">

    <a href="" class="logo">My flower shop</a>

    <nav>

      <ul>

        <li><a href="" routerLink="/">Landing</a></li>

        <li><a href="" routerLink="/home">Home</a></li>

      </ul>

    </nav>

  </div>

</header>

 

<div class="container">

  <router-outlet></router-outlet>

</div>

 

Copy paste below code in your landing.component.html file

 

<h1>Welcome to my flower store</h1>

 

  That is all. Now you will see your app as below.

Welcome to my flower store page


Labels:

Comments

Post a Comment

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on...
Post a Comment
Read more

Android: How to launch android emulator from command line or batch script?

Many Windows based Android developers are facing difficulties in running Android Studio on Windows machines due to lack of performance issues. But if you are developing mobile application using language like React Native you don’t actually need to work on Android Studio. But most of the time you have to use Android Emulators to test your application. If your windows machine does not have at least 16 GB of RAM you always face severe performance issue while running Android Emulators.   One solution to this issue is you can use your mobile phone to test react native application without running on Android Emulators. For that you only need to run Metro server on your PC and test application run on your mobile phone. But this method has drawbacks you have only one platform to test your application. If you want to test your application on multiple platforms you have to use several Emulators with different Android versions and architectures.   Another solution is without load ...
Post a Comment
Read more

No More Database Programming Needed !

Are you tired in writing complex code for your database design? Want to be little relax? This article will help you to enjoy your job. In early days we had to write coding from the scratch to implement our database designs. Later people moved to database designing graphical tools. The latest trend of designing databases is use database navigation maps where you can visually feel your database design. This method is very useful if your database is little complex and you have lot of key constraints, referential integrity constraints, indexes and triggers etc. Using database navigation maps you can see either the entire database or part of it, how the tables are integrate each other, what are the keys you have defined for tables and references etc. Most importantly you don't need to write any single code or no need to remember complex SQL syntax.
2 comments
Read more