simple project for angular with mdb

Topic: simple project for angular with mdb

Rezgar free asked 7 years ago

Hello people,I am new to angular and mdb framework also, we want to test this framework and see if it fulfills our need .can any provide a simple project for angular with mdb ?!thanks

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Rezgar, if you for example wants to build navigation, you have to use only code from documentation.

In example sample navigation for your's application should likes this below. After navigation you could use some buttons, card, carousel or whatever what you want.
<pre><code class=" language-markup">

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
 
 
 <logo><a class="navbar-brand" href="#">Navbar</a></logo>

<links>

<ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius>Features</a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>
 </li>

<li class="nav-item dropdown" dropdown>
 <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
 Basic dropdown<span class="caret"></span></a>
 <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
 <div class="divider dropdown-divider"></div>
 <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
 </div>
 </li>

</ul>

<form class="form-inline waves-light" mdbRippleRadius>
 <input class="form-control mr-sm-2" type="text" placeholder="Search">
 </form>
 </links>

</mdb-navbar>
</code>

</pre>

Rezgar, if you for example wants to build navigation, you have to use only code from documentation.In example sample navigation for your's application should likes this below. After navigation you could use some buttons, card, carousel or whatever what you want. <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

    <span class="token comment" spellcheck="true"><!-- Navbar brand --></span>
    <span class="token tag"><span class="token punctuation"><</span>logo<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar-brand<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Navbar<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>logo<span class="token punctuation">></span></span>

    <span class="token comment" spellcheck="true"><!-- Collapsible content --></span>
    <span class="token tag"><span class="token punctuation"><</span>links<span class="token punctuation">></span></span>

        <span class="token comment" spellcheck="true"><!-- Links --></span>
        <span class="token tag"><span class="token punctuation"><</span>ul <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar-nav mr-auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token punctuation"><</span>span <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sr-only<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>(current)<span class="token tag"><span class="token punctuation"></</span>span<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>Features<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>Pricing<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>

            <span class="token comment" spellcheck="true"><!-- Dropdown --></span>
            <span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item dropdown<span class="token punctuation">"</span></span> <span class="token attr-name">dropdown</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">dropdownToggle</span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link dropdown-toggle waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>
                Basic dropdown<span class="token tag"><span class="token punctuation"><</span>span <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>caret<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>span<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">*dropdownMenu</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-menu dropdown dropdown-primary<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Action<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Another action<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Something else here<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>divider dropdown-divider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Separated link<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
                <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>

        <span class="token tag"><span class="token punctuation"></</span>ul<span class="token punctuation">></span></span>
        <span class="token comment" spellcheck="true"><!-- Links --></span>

        <span class="token comment" spellcheck="true"><!-- Search form --></span>
        <span class="token tag"><span class="token punctuation"><</span>form <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-inline  waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control mr-sm-2<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token punctuation"></</span>form<span class="token punctuation">></span></span>
    <span class="token tag"><span class="token punctuation"></</span>links<span class="token punctuation">></span></span>
    <span class="token comment" spellcheck="true"><!-- Collapsible content --></span>

<span class="token tag"><span class="token punctuation"></</span>mdb-navbar<span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--/.Navbar--></span>

Please insert min. 20 characters.

Rezgar, if you for example wants to build navigation, you have to use only code from documentation. In example sample navigation for your's application should likes this below. After navigation you could use some buttons, card, carousel or whatever what you want.

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

    <!-- Navbar brand -->
    <logo><a class="navbar-brand" href="#">Navbar</a></logo>

    <!-- Collapsible content -->
    <links>

        <!-- Links -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>
            </li>

            <!-- Dropdown -->
            <li class="nav-item dropdown" dropdown>
                <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                Basic dropdown<span class="caret"></span></a>
                <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
                    <div class="divider dropdown-divider"></div>
                    <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
                </div>
            </li>

        </ul>
        <!-- Links -->

        <!-- Search form -->
        <form class="form-inline  waves-light" mdbRippleRadius>
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
        </form>
    </links>
    <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

Rezgar free commented 7 years ago

thanks a lot, I got it, for components like date picker, how can we test it ?! I already sent an email to support without reply. thanks again

Damian Gemza staff commented 7 years ago

Just copy code from documentation and refresh page :) If you need more help, please write an email to me: d.gemza@mdbootstrap.com

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Hello Rezgar,We haven't got sample application to deliver our customers. In one hour you could build sample app using our Angular components. Just pick few things from our documentation, and copy sample codes to your's application. It's really easy even for people who had no contact with Angular / Bootstrap.Best Regards,Damian

Please insert min. 20 characters.

Hello Rezgar, We haven't got sample application to deliver our customers. In one hour you could build sample app using our Angular components. Just pick few things from our documentation, and copy sample codes to your's application. It's really easy even for people who had no contact with Angular / Bootstrap. Best Regards, Damian

Rezgar free commented 7 years ago

Hello Damian, thanks for quick response, sorry for dummy question but is there special selector like mdb-navbar or mdb-header should I use ? thanks

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Rezgar

0Support score
2Questions 0Answers 0Snippets