I'm struck with ngif to show piece of html code or not help me


#1

I’m working on custom calendar. this going great
i have code it in c++

int current_month = 31;
int start_day = 2;
cout << endl << "Mon\tTue\tWed\tThr\tFri\tSat\tSun\n"; 
	for (int i = 1; i < start_day; i++) 
	{ 
		cout << " \t"; 
	} 
	for (int j = 1; j <= current_month; j++) 
	{ 
	if (((j + start_day - 2) % 7 == 0) && (j != 1)) 
		cout << endl; 
		cout << j  << "\t"; 
	} 
	cout << endl << endl;

i have to do this in ionic i tried but struck in the middle

<table padding-top>
      <thead>
        <th colspan="7" class="month">APRIL</th>
      </thead>
      <tbody>
        <tr class="days-row">
          <td>Mon</td>
          <td>Tues</td>
          <td>Wed</td>
          <td>Thus</td>
          <td>Fri</td>
          <td>Sat</td>
          <td>Sun</td>
        </tr>
         
        <tr>
           
             <td *ngFor="let Bday of start_days"></td>
              // the above code work good now i have to start new row when 7 td complete 
              // *ngIf="((j + start - 2) % 7 == 0) && (j != 1)" this code will help to determined that 7 blocks have completed now its time to add new row (</tr><tr><td>{{j+1}}</td) how implement this step 
            <td *ngFor="let day of no_days; let j = index">{{j+1}}</td> //it prints 31 days in a single line
            
        </tr>
        
      </tbody>
    </table>
// ============  In ts file
 made array of number of days in a month 
and starting day of month

Screenshot


#2

Are you working in Ionic 4?


#3

See:

And:


#4

i’m using ionic 3 need a custom calendar where user can’t enter the event . we have to change color according to API data


#5

Then why use C++? Typescript much simpler fit.


#6

i need a custom calendar can you please help me in this


#7

i’m new in ionic . i have command in c++ so it practice the code of calendar in C++ now i have to convert it in ionic getting problem to implement the algorithm of add new row

(((j + start_day - 2) % 7 == 0) && (j != 1))


#8

I don’t understand why you’re writing web browser code in C++. Do you want to compile it to Javascript before building in Ionic? Most browsers don’t understand C++. (Maybe none of them does.)


#9

i wrote it in C++ just for my practice
i need it in ionic . i’m trying to write it in angular i’m getting problem to add new row when the 7 cell (<td>) complete but i dont know how to add the ngif condition in td i hvae the algorithm which can add new row eg; <td *ngFor="let Bday of start_days"></td><td *ngFor="let Bday of start_days"></td> this will add td if the don’t start on Monday then it will add empty <td> that is all good

<td *ngFor="let day of no_days; let j = index">{{j+1}}</td>this code add date 123 <td>1</td><td>2</td>.. the problem is that it print all the date in one line as shown in above picture i wanted to add if statement which requires a tag and which result disturb calendar view
i tried <ng-container> tag for *ngIf

 <td *ngFor="let day of no_days; let j = index">{{j+1}}
                <ng-container *ngIf="((j + start - 2) % 7 == 0) && (j != 1)">
                  </td> </tr><tr><td> {{j+1}}
                  </ng-container>
            </td>//this if condition come true it will close previous <td> and row<tr> and start new row and cell with the date but it give error html 


#10

Write in Typescript. Don’t put such heavy code into your template, or you’ll have performance issues, For the most part, you want your HTML to have a very simple job: it displays the results of what your Typescript controller has already computed.


#11

what i have to do is there any type code available